JSFiddle - React, Tailwind, and code Playground

by jbabey

HTML

<div>
    <a href="#" id="1" class="title" name="1">one</a>
</div> 
<div id="workdiv1" class="workdiv" style="display:none">
    one content
</div>

<div class="storybottom">
    <a href="#" id="2" class="title" name="2">two</a>
</div> 
<div id="workdiv2" class="workdiv" style="display:none">
    two content
</div>

<div class="storybottom">
    <a href="#" id="3" class="title" name="3">three</a>
</div> 
<div id="workdiv3" class="workdiv" style="display:none">
    three content
</div>

JavaScript

$(document).ready(function() {
    $('a.title').click(function() {
        var correspondingDiv = $(this).parent().next('div');
        
        if (!correspondingDiv.is(':hidden')) {
            return;
        }
        
        // hide other divs
        $('.workdiv').hide(150);
        
        // show this one
        correspondingDiv.toggle(150);
    }); 
});