JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<a href="" class="topLink" data-target="t1">BUTTON</a>
<a href="" class="topLink" data-target='t2'>BUTTON</a>
<a href="" class="topLink" data-target='t3'>BUTTON</a>

<a href="" class="myCustomButton">I am a custom button</a>

<div class="toggles" data-target='t1'>
CONTENT1
</div>
<div class="toggles" data-target='t2'>
CONTENT2
</div>
<div class="toggles" data-target='t3'>
CONTENT3
</div>

CSS

.toggles{    
    display:none;
}

JavaScript

$(document).ready(function () {
    $(".topLink").on('click', function (event){
        event.preventDefault();
        var e = $(this); //writing $(this) every time is bad
        t = $("div[data-target='"+e.attr('data-target')+"']"); //same as above
        
        if(e.hasClass('active')){ 
            //remove from this
            e.removeClass("active");
            //close box    
            t.slideUp("slow");
        } else { //toggle menu when clicking on some other link
            //remove from everywhere
            $(".topLink").removeClass('active');
            //slide every box up
            $('.toggles').slideUp("slow");
            //add to this only
            e.addClass('active'); 
            //slide associated box down
            t.slideDown("slow");
        }
    });
    $(document).on('click','.myCustomButton',function(event){
        event.preventDefault();
        $('.topLink').removeClass('active');
        $('.toggles').slideUp("slow"); // maybe you need it, maybe you don't - most likely you do
    })
});