JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<a href="#" class="slide" data-content="#one" data-text="first">Show first</a>
<a href="#" class="slide" data-content="#second" data-text="second">Show second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>

JavaScript

$('.slide').on("click",function(){
    var $link = $(this);
   var contentid = $link.data('content');
    $('.slide').not($link).filter(function(){ return $(this).data('contentvisible');}).trigger('click');
    $(contentid).slideToggle(400,function(){
        if($(this).is(':visible')){
            $link.data('contentvisible',true).text('Hide ' + $link.data('text'));
        }
        else{
           $link.data('contentvisible',false).text('Show ' + $link.data('text'));                
        }
    });
});
$('#one').hide();
$('#second').hide();