SO-Question

Collapse all but display first one

by Bart Schelkens

HTML

<div class="accordion-expand-holder">
    <button type="button" class="open">Expand all</button>
    <button type="button" class="close">Collapse all</button>
</div>
                    
<div class="accordion">
    <h1>High Performance Polymers</h1>
    <div>
        <div class="accordion">
            <h1>Safety Data Sheet</h1>
            <div>
                Here comes text.
            </div>
        </div>
        <div class="accordion">
            <h1>Technical Data Sheet</h1>
            <div>
                Here comes somes other text
            </div>
        </div>
    </div>
</div>
<div class="accordion">
    <h1>Eperan</h1>
    <div>
        <div class="accordion">
            <h1>Safety Data Sheet</h1>
            <div>
                Here comes some ohter text
            </div>
        </div>
        <div class="accordion">
            <h1>Technical Data Sheet</h1>
            <div>
                Some other text.
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size:65%;
}
.accordion-expand-holder {
    margin:10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
    margin:0 10px 0 0;
}

JavaScript

// Accordion - Expand All #01
$(function () {
    $(".accordion").accordion({
        collapsible:true,
        active:false
    });
    var icons = $( ".accordion" ).accordion( "option", "icons" );
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
            'aria-selected': 'true',
            'tabindex': '0'
        });
        $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
            'aria-expanded': 'true',
            'aria-hidden': 'false'
        }).show();
        $(this).attr("disabled","disabled");
        $('.close').removeAttr("disabled");
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
            'aria-selected': 'false',
            'tabindex': '-1'
        });
        $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
            'aria-expanded': 'false',
            'aria-hidden': 'true'
        }).hide();
        $(this).attr("disabled","disabled");
        $('.open').removeAttr("disabled");
    });
    $('.ui-accordion-header').click(function () {
        $('.open').removeAttr("disabled");
        $('.close').removeAttr("disabled");
        
    });
});