JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<ul>
    <li class="toggleArea">
        <div class="toggleLabel"> <a href="#">list item one</a><i class="toggleIcon" data-state="collapsed"></i>

        </div>
        <div class="toggleContent" data-state="collapsed">toggleContent one</div>
    </li>
    <li>
        <div class="toggleLabel"> <a href="#">list item two</a><i class="toggleIcon" data-state="collapsed"></i>

        </div>
        <div class="toggleContent" data-state="collapsed">toggleContent two</div>
    </li>
    <li>
        <div class="toggleLabel"> <a href="#">list item three</a><i class="toggleIcon" data-state="collapsed"></i>

        </div>
        <div class="toggleContent" data-state="collapsed">toggleContent three</div>
    </li>
</ul>
<div class="queryTest">
    <div id="first">
        <div class="first_nested"></div>
    </div>
    <div class="second">
        <div class="second_nested"></div>
    </div>
</div>
<div class="queryTest">
    <div class="first">
        <div class="first_nested"></div>
    </div>
    <div class="second">
        <div class="second_nested"></div>
    </div>
</div>
<div id="console"></div>

CSS

body {
    background: #034;
    color: #333;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
}
a {
    color: #333;
    text-decoration: none;
}
i {
    font-style: normal;
}
ul {
    list-style: none;
    overflow: hidden;
    padding: 0 24px;
    width: 300px;
}
li {
    clear: both;
    background: #eee;
    border-bottom: 2px solid #aaa;
    padding: 0px;
}
.toggleLabel {
    overflow: hidden;
    padding: 18px;
}
.toggleLabel a {
    float: left;
    padding: 5px;
}
.toggleIcon {
    cursor: pointer;
    border: 1px solid #000;
    float: right;
    padding: 5px 5px;
    text-align: center;
    width: 32px;
}
.toggleContent {
    border-top: 2px solid #bac;
    background: #334;
    color: #eee;
    padding: 18px 14px;
}
.toggleContent[data-state=collapsed] {
    display: none;
}
.toggleContent[data-state=expanded] {
    display: block;
}
.toggleIcon[data-state=collapsed]:after {
    content:'+';
}
.toggleIcon[data-state=expanded]:after {
    content:'-';
}
#console {
    position: absolute;
    color: white;
    top: 0;
    right: 100px;
}

JavaScript

var toggleDataAttr = function (iconElem) {
    var opt1 = 'collapsed', opt2 = 'expanded', dataAttr = 'data-state';
    var toggleContent = iconElem.parentElement.nextElementSibling;
    iconElem.setAttribute(dataAttr, iconElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
    toggleContent.setAttribute(dataAttr, toggleContent.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
};

var toggler = document.querySelectorAll('.toggleIcon');

for (var i = 0; i < toggler.length; i++) {
    toggler[i].onclick = function () {
        toggleDataAttr(this);
    };
}