Carol
Carol

Reputation: 329

Jquery: SlideToggle on List with divs

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

Answers (2)

dreamweiver
dreamweiver

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

billyonecan
billyonecan

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

Here's an updated fiddle

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

Related Questions