Question

I have multiple jQuery accordions on one page all with different id’s etc.. I’m attempting to only allow one accordion to open at a time. For example the user opens one and then goes on to a different accordion and the new one opens as the one that user was just using closes.

is there anyway of doing this?

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 i’m using at the moment

    <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 the jQuery UI accordion, you can collapse all sections with .accordion('activate', false).

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

Then, initialize the accordions in a single $(function(){...}) structure (just 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

Tracking the active accordion with activeAccordian is all important as it allows reciprocal re-closure of the freshly opened accordion to be suppressed.

EDIT:

The “aussi la solution” below, in which .on('accordionchange' ...) is replaced with .on('click' ...) makes me realise that the whole thing will simplify to :

$(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 as .not(this) in the click handler suffices.

DEMO