JSFiddle - React, Tailwind, and code Playground

by Rino Raj

HTML

<div id="1"><a href="#">Menu Div 1</a></div>
<div id="sub1" class="menu" style="display:none">
<ul>
	<li>Div 1 Test 1</li>
	<li>Div 1 Test 2</li>
	<li>Div 1 Test 3</li>
</ul>
</div>

<div id="2"><a href="#">Menu Div 2</a></div>
<div id="sub2" class="menu" style="display:none">
<ul>
	<li>Div 2 Test 1</li>
	<li>Div 2 Test 2</li>
	<li>Div 2 Test 3</li>
</ul>
</div>

<div id="3"><a href="#">Menu Div 3</a></div>
<div id="sub3" class="menu" style="display:none">
<ul>
	<li>Div 3 Test 1</li>
	<li>Div 3 Test 2</li>
	<li>Div 3 Test 3</li>
</ul>
</div>

JavaScript

$(document).ready(function () {
    $('#1,#2,#3').click(function () {
        var isActive = $(this).next("div").hasClass('active');
        $(".menu").each(function(){
            $(this).slideUp(150);
            $(this).removeClass('active')
        });
        if(! isActive ){
            $(this).next("div").slideToggle(150);
            $(this).next("div").addClass('active');
            $(this).siblings().next("div ul").hide(150);
        }  
    });

    /*$('#2').click(function () {
        $('#sub1').hide(150);
        $('#sub3').hide(150);
        $('#sub2').slideToggle(150);
    });

    $('#3').click(function () {
        $('#sub1').hide(150);
        $('#sub2').hide(150);
        $('#sub3').slideToggle(150);
    });*/
});