JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<ul class="accordion">
    <li>
        <h1>Header 1</h1>
        <div>
            <p>I'm the first paragraph for header 1.</p>
            <p>I'm the second paragraph for header 1.</p>
        </div>
    </li>
    <li>
        <h1>Header 2</h1>
        <div>
            <p>I'm the first paragraph for header 2.</p>
            <p>I'm the second paragraph for header 2.</p>
        </div>
    </li>
    <li>
        <h1>Header 3</h1>
        <div>
            <p>I'm the first paragraph for header 3.</p>
            <p>I'm the second paragraph for header 3.</p>
        </div>
    </li>
</ul>

CSS

* { margin:0; padding:0; font-family:sans-serif; }
.accordion { list-style:none; margin:30px; }
.accordion h1 { font-size:18px; color:#333; background:#e0e0e0; padding:4px 12px; cursor:pointer; }
.accordion h1.active { background:#67a1cf; color:#fff }
.accordion div { padding:10px 16px; }
.accordion div p { font-size:15px; line-height:1; padding-bottom:1em; }

JavaScript

var accordion = $('.accordion');

accordion.find('div').hide();

accordion.find('h1').on('click', function(){
    
    $(this)
        .addClass('active')
        .next()
        .show()
        .parents('.accordion')
        .find('h1')
        .not( $(this) )
        .removeClass('active')
        .next()
        .hide();

});