JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div class="content-toggle">
    <div class="container">1</div>
    <div class="container">2</div>
    <div class="container">3</div>
    <div class="container">4</div>
    <div class="container">5</div>
    <div class="container">6</div>
</div>
<div class="content-toggle">
    <div class="container">7</div>
    <div class="container">8</div>
    <div class="container">9</div>
    <div class="container">10</div>
    <div class="container">11</div>
    <div class="container">12</div>
</div>
<button id="expandsections">Click me!</button>

CSS

button {
    width: 40px;
    height: 40px;
    background-color: purple;
}
.content-toggle {
    width: 200px;
    height: 100%;
    min-height: 100px;
    background-color: yellow;
    padding: 5px;
    border: 1px solid black;
}
.container {
    width: 100px;
    background-color: red;
    margin: auto;
}

JavaScript

$('.container').hide();
$('.status-icon').text("+");

$('#expandsections').click(function (e) {

    var allContentToggleContainers = $('.content-toggle .container');

    var allVisibleContentToggleContainers = allContentToggleContainers.filter(function () {
        return $(this).css("display") == "block";
    });

    if (allContentToggleContainers.length && allContentToggleContainers.length === allVisibleContentToggleContainers.length) {
        allContentToggleContainers.hide().next().slideUp();
        $('.status-icon').text("+");
    } else {
        allContentToggleContainers.not('selector:visible').show().next().slideDown();
        $('.status-icon').text("+");
    }

    return false;
});