JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css">
<div id="accordion">
    <h3>Panel 1</h3>
    <div class="toggler">Div 1 content</div>
    <h3>Panel 2</h3>
    <div class="toggler">Div 2 content</div>
    <h3>Panel 3</h3>
    <div class="toggler">Div 3 content</div>
    <h3>Panel 4</h3>
    <div class="toggler">Div 4 content</div>
</div>
<a href="#" class="expand">expand all</a>

CSS

#accordion h3 {
    padding-left: 25px;
}

JavaScript

function expandAll() {
    $('#accordion h3').removeClass('ui-state-default')
        .addClass('ui-state-active')
        .removeClass('ui-corner-all')
        .addClass('ui-corner-top')
        .attr('aria-expanded', 'true')
        .attr('aria-selected', 'true')
        .attr('tabIndex', 0)
    .find('span.ui-icon')
        .removeClass('ui-icon-triangle-1-e')
        .addClass('ui-icon-triangle-1-s')
    .closest('h3').next('div')
        .show();

    $('.expand').text('collapse all').unbind('click').bind('click', collapseAll);

    $('#accordion h3').bind('click.collapse', function() {
        collapseAll();
        $(this).click();
    });
}

function collapseAll() {
    $('#accordion h3').unbind('click.collapse');

    $('#accordion h3').removeClass('ui-state-active')
            .addClass('ui-state-default')
            .removeClass('ui-corner-top')
            .addClass('ui-corner-all')
            .attr('aria-expanded', 'false')
            .attr('aria-selected', 'false')
            .attr('tabIndex', -1)
        .find('span.ui-icon')
            .removeClass('ui-icon-triangle-1-s')
            .addClass('ui-icon-triangle-1-e')
        .closest('h3').next('div')
            .hide();

    $('.expand').text('expand all').unbind('click').bind('click', expandAll);

    $('#accordion').accordion('destroy').accordion();
}

$().ready(function() {
    $('.expand').click(expandAll);
    
    $('#accordion').accordion();
});