sliding multiple elements on click

Question

i have a vertical menu bar which contains sub menu. There are 9-10 menus and each menu contains 3 sub menus.

what i need if menu 1 is open and someone click on menu 3 menu 1 should close & menu 3 will open

 $('#nav li a').click(function(){
    var sds = document.getElementById("dum");
    if(sds == null){
    ;
    }
    var sdss = document.getElementById("dumdiv");
    if(sdss == null){



    }
    if(sdss != null){
            var s = $(this).attr('id');
            var imgid=$("#"+s+" img").attr('id');
            var imgsrc=$("#"+imgid+"").attr('src');
            if(imgsrc=="images/insert.GIF")
            {
                $("#"+imgid+"").attr('src','images/remove.GIF');
                $(this).next().slideDown(400);
                $("#"+s+"").css("background-color","#142878");
            }
            else
            {
                $("#"+imgid+"").attr('src','images/insert.GIF');
                $(this).next().slideUp(400);
                $("#"+s+"").css("background-color","#2d539a");
            }
    }
        });

here's the fiddle

You can find a similar question and answers here: http://stackoverflow.com/questions/10901626/hide-menu-onclick — , Jan 21 '14 at 09:00

score 2 · Answer 1 · answered Jan 21 '14 at 09:03

2

Use

$('a').next().slideUp(400);

If you click on any menu, this will close the current menu and opens the new one

Here is the updated Fiddle

answered Jan 21 '14 at 09:03

Linga

10,379
10
52
104

if u click on 2 menu 3rd menu & so on & then again click on menu 2 first it will close the current menu in one click and in other click this will open current menu means require 2 clicks sometime. same problem for all answers – Atal Shrivastava Jan 21 '14 at 09:27

score 2 · Answer 2 · answered Jan 21 '14 at 09:04

2

Add this to the beginning your code:

$('#nav li a').click(function(){
    $(this).closest('li').siblings('li').find('.count').slideUp();
    // Rest of the code here

Updated Demo

answered Jan 21 '14 at 09:04

Felix

37,892
8
43
55

Jai · Accepted Answer · 2014-01-21T09:34:42.713

1

Try this:

 $('.count').slideUp(400);     //<----add this line
 $(this).next().slideDown(400);

Demo

Updates:

try this:

if (imgsrc == "images/insert.GIF") {
    $("#" + imgid + "").attr('src', 'images/remove.GIF');
    $('.count').slideUp(400);
    $(this).next().slideDown(400);
    $("#" + s + "").css("background-color", "#142878");
} else {
    $("#" + imgid + "").attr('src', 'images/insert.GIF');
    $('.count').slideUp(400);  //<--------------------add here
    $(this).next().slideDown(400);  //<---------------and here too.
    $("#" + s + "").css("background-color", "#2d539a");
}

edited Jan 21 '14 at 09:34

answered Jan 21 '14 at 09:09

Jai

74,255
12
74
103

if u click on 2 menu 3rd menu & so on & then again click on menu 2 first it will close the current menu in one click and in other click this will open current menu means require 2 clicks sometime – Atal Shrivastava Jan 21 '14 at 09:27

sliding multiple elements on click

3 Answers3

Demo

Updates:

Linked