JSFiddle - React, Tailwind, and code Playground

by vicky081

HTML

<h2 class="acc_trigger"><a href="#">Div 1</a></h2>

<div class="acc_container">
    <div class="block">Yay content!</div>
</div>

<h2 class="acc_trigger"><a href="#">Div 2</a></h2>

<div class="acc_container">
    <div class="block">More Content, Score!</div>
</div>

<h2 class="acc_trigger"><a href="#">Div 3</a></h2>

<div class="acc_container">
    <div class="block">Even More Content</div>
</div>
<a href="#" class="acc_expand-all">Expand/Collapse All </a>

CSS

h2.acc_trigger {
    padding: 0;
    margin: 0 0 5px 0;
    height: 46px;
    line-height: 46px;
    width: 590px;
    font-size: 1.5em;
    font-weight: normal;
    float: left;
    margin-bottom:0;
}
h2.acc_trigger a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
}
h2.acc_trigger.active a {
    color: #FF0000;
}
h2.acc_trigger a:hover {
    color: #999;
}
h2.acc_trigger a:active, h2.active {
    color:#ED2224;
}
h2.active {
    background-position: left bottom;
}
.acc_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 590px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top:none;
}
.acc_container .block {
    padding: 20px;
}

JavaScript

jQuery(document).ready(function ($) {
    //Set default open/close settings
    $('.acc_container').hide(); //Hide/close all containers

    //On Click
    $('.acc_trigger').click(function () {
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown();
        return false; //Prevent the browser jump to the link anchor

    });


    $('.acc_expand-all').click(function () {
        var all = $('.acc_trigger'),
            active = all.filter('.active');

        if (all.length && all.length === active.length) {
            // All open; close them
            all.removeClass('active').next().slideUp();
        } else {
            // At least some are closed, open all
            all.not('.active').addClass('active').next().slideDown();
        }

        return false;
    });



});