//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {
$(‘div.accordionContent’).slideUp(‘normal’);
$(this).next().slideToggle(‘normal’);
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();

});

Thanks for the simplicity.

$(document).ready(function() {

//ACCORDION BUTTON ACTION
$(‘div.accordionButton’).click(function() {

if($(this).next().is(‘:visible’)) {
$(this).next().slideToggle(‘normal’);
} else {
$(this).next().slideToggle(‘normal’);
}
});

//HIDE THE DIVS ON PAGE LOAD
$(“div.accordionContent”).hide();
});

//ACCORDION BUTTON ACTION	
$('.hide').click(function() {		
    $('div.accordionContent').slideUp('normal');	
});

Then you can add a span or some other element with the class “hide” and when it is clicked it will slide up all open accordion panels.

<span class="hide">Hide all Panels</span>

Basically the Javascript code will execute anytime someone clicks and element with the class hide. It will then loop through all the DIV elements with the class accordionContent and close them if they are open. If you wish to open them all you would do the same thing except instead of using .slideUP in the jQuery you would use slideDown.

I have this scenario and I would like your help: when I click in a link in the content (that loads another page of the site), the same menu unfolds again. I would prefer though to avoid having the menu unfodling for a second time (to get rid of the animation when it reloads). Is it possible?

Also, thanks for posting a way to have the menu close again on click.
Just what I was looking for!

I read through most of the comments but I can’t seem to find the answer. How do you keep an accordion stay open upon page change? The opened accordion should be the one that the user previously clicked.