JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1
    <div class="content">stuff 1</div>
</div>

<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2
    <div class="content">stuff 2</div>
</div>

<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3
    <div class="content">stuff 3</div>
</div>

<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4
    <div class="content">stuff 4</div>
</div>

CSS

.content { display: none }

.open .content { display: block }

JavaScript

$('.spoiler').click(function(){

    // if the current is not open then hide opened
    if( !($(this).hasClass('open')) ) {
        $('.spoiler').removeClass('open');
        $(this).addClass('open');
    } else {
        // remove open if you want to close it
    }

});