CODEWITHSUNDEEP
jquerydrop-down-menunavigationtoggle
user1788364
user1788364

Reputation: 1151

jquery click drop down slide toggle navigation

I've been trying to figure this out for ages. Basically I have a menu and when a user clicks on an arrow it will slideToggle the dropdown below.

I'd like it to do a number of things.

1) When the user clicks on the arrow dropdown and it slides down I'd like them to be able to click on the arrow again and for the dropdown menu to slide up.

2) If a user clicks a different arrow dropdown I'd like the first dropdown to disappear and then the new dropdown to appear.

This is what I have so far. It's working apart from point 2.

$('nav li i').click(function() {  
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300);
    $('nav li').find('.open').not($(this)).removeClass('open');    
    $(this).toggleClass('open');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

You can see a jsfiddle here which hopefully shows its a bit better (the red box is the clickable area):

http://jsfiddle.net/c8kHN/1/

EDIT: I've managed to get the second point to work (first dropdown to disappear if a user clicks on another one) - however it then breaks the first point.

$('nav li i').click(function() {  
    $('nav li.open').not($(this)).find('.dropdown').hide();
    $('nav').find('.open').not($(this)).removeClass('open');    
    $(this).parent('nav li').toggleClass('open');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

http://jsfiddle.net/c8kHN/7/

Upvotes: 1

Views: 4728

Answers (2)

Manish Parmar
Manish Parmar

Reputation: 859

i have tried this code 

$('nav li i').click(function() {  
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300);
    $('nav li').find('.open').not($(this)).removeClass('open');    
    $(this).toggleClass('close');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

Hope this is you looking for..

Upvotes: 0

80PoundsOfFury
80PoundsOfFury

Reputation: 264

If you collect the child "i" that is clicked it helps later to decide which "div" to show/hide. Your code could benefit from adding different classes to the li's, but I wrote an answer without adding anything to your original HTML. hope this helps.

$('nav li i').click(function() {

var child = $(this).index('nav ul li i');

if ($(this).siblings('.dropdown').is(":visible")){
    $('.dropdown').slideUp(300);
}else{
    $('.dropdown').slideUp(300);
    $('.dropdown:eq('+child+')').slideDown(300);    
}

});

Upvotes: 1

Related Questions