JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div>
<div id="hide1" class="hide">Hide 1</div>
<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div>
<div id="hide2" class="hide">Hide 2</div>
<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div>
<div id="hide3" class="hide">Hide 3</div>
<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div>
<div id="hide4" class="hide">Hide 4</div>

CSS

.spoiler{
    background-color: #CCAACC;
}

.hide{
    display:none;
    background-color: #9900AA;
}

JavaScript

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});