JSFiddle - React, Tailwind, and code Playground

by ktstowell

HTML

<div class="accordion closed">
    <div class="accordion-header">
                <span class="accordion-toggle"></span>
        <h3>Accordion Title</h3>
        <!-- What the click event is bound to -->
    </div>
    <!-- What gets hidden/shown when toggle is clicked -->
    <div class="accordion-content">
        <p>Here's our accordion content!</p>
        <!-- Nested Accordion -->
        <div class="accordion closed">
            <div class="accordion-header">
                        <span class="accordion-toggle"></span>
                <h3>Accordion Title</h3>
                <!-- What the click event is bound to -->
            </div>
            <!-- What gets hidden/shown when toggle is clicked -->
            <div class="accordion-content">
                <p>Here's our accordion content!</p>
            </div>
        </div>
    </div>
</div>

CSS

h3 {
    margin:0;
    padding:0;
    display: inline-block;
}

div.accordion {
    border: 1px solid #333;
    margin:0 auto;
    width: 80%;
}

.accordion-header {
    height: 30px;
    width:100%;
    background-color: #ccc;
}

.accordion.closed >.accordion-content {
    display:none;
}

.accordion.open >.accordion-content {
    display:block;
}

.accordion-toggle {
   vertical-align: middle;
    padding: 10px;
    cursor: pointer;
}

.accordion.open .accordion-toggle:after {
    content: "-";
}

.accordion.closed .accordion-toggle:after {
    content: "+";
}

JavaScript

var toggles = document.querySelectorAll('.accordion-toggle');

for(var i=0; i<toggles.length; i++) {
    toggles[i].addEventListener('click', accordion, false);
}

function accordion(e) {
    var ele = e.target,
        parent = e.target.parentElement.parentElement;
    
    // find the immediate .accordion parent
    console.log(ele, parent);
    
    if(parent.classList.contains('open')) {
        parent.classList.remove('open');
        parent.classList.add('closed');
    } else if(parent.classList.contains('closed')){
        parent.classList.add('open');
        parent.classList.remove('closed');
    }
}