Reputation: 329
I'm trying to use list elements to build a simple menu for my website. The thing is that i want to show the '.second-row' div when the arrow is clicked and hide any other that is open, but all the ways i tried wasnt working.
Somebody could help me? The example is here
Upvotes: 0
Views: 325
Reputation: 6002
I just changed on click event a bit
$('a.arrow-1 ').click(function () {
//alert("clicked");
var cli=$(this).closest('li').find('.second-row');
alert(cli);
$(cli).slideToggle();
});
you can get the working copy from HERE
Happy coding :)
Upvotes: 0
Reputation: 20250
You need to get the second-row
which corresponds to the arrow-1
that was clicked:
$('a.arrow-1 ').click(function () {
$('.second-row').slideUp();
$(this).parent('.first-row').siblings('.second-row').slideDown();
});
Note: You'll probably want to add some logic to check the last clicked arrow-1
, and return if it's the same as the current clicked one so that the slideUp()/slideDown()
doesn't occur when clicking the same arrow-1
twice.
Upvotes: 1