Close accordions if another accordion is open in jquery

Question

I have several jquery accordions on the same page with different identifiers, etc. I am trying to open only one accordion at a time. For example, a user opens one and then switches to another accordion, and a new one opens like the one that the user simply used to close.

is this done anyway?

Below is an example of one accordion ... they all look the same at the moment.

<div id="accordion"> <h3 class="one" href="#section1">Location</a></h3> <div class="tab1"> <form class="myform"> <label><b>Weeks</b></label><br> <input type = "checkbox" id = "allweeks" /> <label for = "allweeks">All Weeks</label><br> <input type = "checkbox" id = "w1" /> <label for = "w1">Week 1</label><br> <input type = "checkbox" id = "w2" /> <label for = "w2">Week 2</label><br> <input type = "checkbox" id = "w3" /> <label for = "w3">Week 3</label><br> <input type = "checkbox" id = "w4" /> <label for = "w4">Week 4</label><br> <input type = "checkbox" id = "w5" /> <label for = "w5">Week 5</label></br> <input type = "checkbox" id = "w6" /> <label for = "w6">Week 6</label><br> <input type = "checkbox" id = "w7" /> <label for = "w7">Week 7</label><br> <input type = "checkbox" id = "w8" /> <label for = "w8">Week 8</label><br> <input type = "checkbox" id = "w9" /> <label for = "w9">Week 9</label><br> <input type = "checkbox" id = "w10" /> <label for = "w10">Week 10</label><br> <input type = "checkbox" id = "w11" /> <label for = "w11">Week 11</label><br> <input type = "checkbox" id = "w12" /> <label for = "w12">Week 12</label><br> </form> </div> 

These are the scripts that I am currently using.

  <script> $(function() { $( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion(); }); $(function() { var icons = { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s" }; $( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion({ icons: icons, collapsible: true }); $( "#toggle" ).button().toggle(function () { $( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion( "option", "icons", false ); }, function () { $( "#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5" ).accordion( "option", "icons", icons ); }); }); $(function() { $("#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5").accordion({ header: "h3", collapsible: true, active: false }); }); </script> 

Answer 1

Assuming you are using a jQuery UI accordion, you can collapse all sections using .accordion('activate', false) .

First, in your HTML, give all the class="accordion" containers to make them more easily addressable as a group. You can save the id="accordion1" attributes, etc. If you need to access the accordions individually.

Then initialize the accordions in the single $(function(){...}) structure (only once, not 3 times) as follows:

 $(function() { var activeAccordian = null; var $accordions = $(".accordion").on('click', function() { activeAccordian = this; }).accordion({ collapsible: true, active: false, icons: false }).on('accordionchange', function(event, ui) { $accordions.not(activeAccordian).accordion('activate', false); }); }); 

Demo

Keeping track of an active accordion with activeAccordian is important because it allows you to suppress the mutual re-closure of a fresh open accordion.

EDIT:

The "aussi la solution" solution below, in which .on('accordionchange' ...) replaced by .on('click' ...) , makes me realize that all this will simplify:

 $(function() { var $accordions = $(".accordion").accordion({ collapsible: true, active: false, icons: false }).on('click', function() { $accordions.not(this).accordion('activate', false); }); }); 

The need to track the active accordion disappears, because .not(this) in the click handler is enough.

Demo