CODEWITHSUNDEEP
javascriptjquery
styler
styler

Reputation: 16501

fading in and fading out a dropdown an unordered list

I am trying to fade in and fade out a <ul> on a click. I know the method I am using is wrong because it doesn't work, but also because I am pretty sure it's because I need to use $(this) instead of the current $('#innerList') but I am just not sure what I have to do.

http://jsfiddle.net/kyllle/tfZXE/

Upvotes: 0

Views: 420

Answers (3)

Nick Brunt
Nick Brunt

Reputation: 10067

Keep it simple, that's the point of JQuery:

    $(document).ready(function(){
        $('#innerList').hide();
        $('.dropLink').click(function(){
            $("#innerList").fadeToggle();            
        });
    });

Upvotes: 3

Alxandr
Alxandr

Reputation: 12431

Here you go: http://jsfiddle.net/tfZXE/13/ (only needed to use toggle, and not click, cause click doesn't take 2 methods. And also, you forgot to add # in front of one of the id's)

Upvotes: 2

Naftali
Naftali

Reputation: 146310

Try this:

$(document).ready(function() {
    $('.innerList').hide();
    $('.dropLink').click(function(e) {
        e.stopPropagation();
        var inner = $('.innerList', $(this).parent());
        inner.fadeToggle(200);
    });
});

Fiddle: http://jsfiddle.net/maniator/tfZXE/12/

I changed the HTML so that every li can have its own innerList

Upvotes: 1

Related Questions