JSFiddle - React, Tailwind, and code Playground

by c2webdev

HTML

<div style="border:1px solid red; width:300px; height:100px;" class = 'hideMe'>Default box already active</div>

<a class="hideDetailsButton primaryButton2" href="#" style="float:left; clear:both;" title="">show box 1</a>
<br /> <!-- hide div -->
            <div id="hideDetailsDiv" class = 'hideMe' style="border:1px solid red; width:300px; height:100px;">
                <h2>box 1</h2>        
            </div><!-- END OF HIDE DIV -->

<br />

<a class = "hideDetailsButton primaryButton2" href="#" style="float:left clear:both;" title="">show box 2</a>          
<br /> <!-- hide div -->
            <div id="hideDetailsDiv2" class = 'hideMe' style="border:1px solid red; width:300px; height:100px; clear:both">
                <h2>Box 2</h2>        
</div><!-- END OF HIDE DIV -->

<br />

<a class="hideDetailsButton primaryButton2" href="#" style="float:left clear:both;" title="">show box 3</a>          
<br /> <!-- hide div -->
            <div id="hideDetailsDiv3" class = 'hideMe' style="border:1px solid red; width:300px; height:100px; clear:both">
                <h2>Box 3</h2>        
            </div><!-- END OF HIDE DIV -->

JavaScript

$(document).ready(function() {
    $('#hideDetailsDiv').hide();
    $('#hideDetailsDiv2').hide();
    $('#hideDetailsDiv3').hide();
    
    $('a.hideDetailsButton').click(function() {
        if (!$(this).next('div.hideMe:first').is(':visible')) {
            $('.hideMe').hide(400);
        }
        $(this).nextAll('div.hideMe:first').toggle(400);
    });
});

/* click on other boxes, active ones open collapse, more than one box cannt be open at same time.

Example: - 
- Default box open,
- Click on show box 1, default box hides,
- Click on show box 2, box 1 hides
- and so on..., so when you open one box the active one hides.
*/