CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordionjquery-ui-accordion
GStubbenhagen
GStubbenhagen

Reputation: 182

JQuery Accordion - Opening issues

I have a vertical accordion which opens perfectly fine when starting to open the accorion from the top down but if you pick one of the options in the middle of the accordion 1st then it does not open correctly.

Oddly, if I open the 1st option then collapse it I can open any other option with no issue.

I'm not sure I've explained this too well so here's a fiddle showing the issue, occurs in both Chrome & IE8: http://jsfiddle.net/gstubbenhagen/JyFRC/

Any help would be much appreciated

Upvotes: 1

Views: 243

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

Do you really need the whole UI library for just an accordion?

Demo without the jQuery.UI

$('#accordion > h2').click(function(){
   var el = $(this).next('.pane');
    el.is(':hidden') ? ($('.pane').slideUp(), el.slideDown()) : $('.pane').slideUp();
});

Upvotes: 1

R2-Bacca
R2-Bacca

Reputation: 150

I think your issue is caused by your display: none call on #accordion .pane. I am assuming you want to have all of the panels hidden when the user loads the page?

Eliminate the display: none and instead use active: false as an option for the accordion:

$("#accordion").accordion({
    collapsible: true,
    active: false
});

Setting "active" to false collapses all panes on loading.

http://jqueryui.com/demos/accordion/#option-active

Upvotes: 0

Related Questions