Geek Answers Handbook

Why is jQuery UI accordion open / close animation so volatile?

I tried to understand this, and I just do not see any problems - also, the same accordion (the same jqueryui version 1.9.2) works without problems on another site, I even switched the theme to use the same one as the other site, and I still getting an aversion to this.

http://www.georgiancollege.ca/wpnew/accordion/?bypass=cache

(working accordion) http://www.georgiancollege.ca/programs/

And this should not be a jquery ui theme, as it works fine here

Any ideas what this could be?

+6
source share
7 answers
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; }

The problem is with this css. If you change it to px instead of em, it will function correctly.

+5
source

For future readers, I also experienced this problem when I did not wrap the contents of my accordion string in a div tag:

Bad:

  <div class="accordion"> <h3>Delivery Address</h3> <table class="address"> <tr><td>...</td></tr> </table> </div>

Good:

  <div class="accordion"> <h3>Delivery Address</h3> <div> <table class="address"> <tr><td>...</td></tr> </table> </div> </div>
+12
source

I had a similar problem. Seeing a few different solutions. I found this to be a margin problem.

This worked for me:

 #accordion .ui-accordion-header { margin:0; }

I have a hightstyle installed for content. By the way

Hope this helps!

+2
source

In my case, this was caused by the edge of the accordion headers and the border of the elements inside my accordion content. You will need to set the margins of these elements to 0. If you want to add a space between these elements, you can use the indentation, and this will not cause problems.

 #accordion h3 { margin: 0; padding: 10px 0; } #accordion p { margin: 0; padding: 10px 0; }

I used paragraph tags inside divs of accordion content. If you are using something else, make sure the field for this item is set to 0.

+2
source

I think you forgot to add all the dependent files in the tag

 <script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script> <script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script> <script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script> <script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js?ver=1.9.2'></script> <script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>

include all the dependencies, then it should work fine.

+1
source

I had a similar issue with a nested accordion in Drupal that was built using Views Nested Accordion. I deleted the line 38 view-nested-accordion.css, which has .ui-accordion .ui-accordion-content {height: auto !important;} , and it fixed my problem.

+1
source

The key to smooth action is the "heightStyle" EG

 $( "#accordion" ).accordion({ heightStyle: "content" });
0
source

More articles:


All Articles