JQuery Onclick Menu Slide

Question

I have the following menu which is working:

https://jsfiddle.net/5g111cyx/

But ofcourse this is an amateur version. I need the code to handle the div menu's once I add or remove menu's automatically, instead of having to change this code every single time:

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

How would I go about it in a simple, yet effective way?

Answer 1

Please use this

$('#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);
    }  
});

DEMO1

UPDATED CODE

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

DEMO2

Answer 2

Try this code.

$('div.show').click(function(){
  $('.menu').hide('slow');
  var idattr = $(this).attr('id');
   $('#sub'+idattr).slideToggle(150);
    $('#sub'+idattr).addClass('active')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="show"><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" class="show"><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" class="show"><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>