Question

I have the following issue: a list item that once clicked, a div slides up and changes opacity to 1. My goal is that on second click, the same div will get opacity 0.

I tried removing the original class and adding a new one, “selected” and then apply a click event on that. For some reason, the second part is not working. Any ideas?

$(document).ready(function () {
    $('li.slide1').click(function () {
        $("div#slidebox1").animate({
            opacity: .8,
            top: -200,

        }, 300);

        $("li.slide1").removeClass("slide1").addClass("selected");

    });

    $("li.selected").click(function () {

        $("div#slidebox1").animate({
            opacity: 0,

        }, 300);

    });
});

Answer 1

You have to use .on() for jQuery 1.7+ or .live() jQuery 1.3+ because you add “selected” class when user click on li.slide1 and it does’t exist before.

$(document).ready(function () {
    $('li.slide1').live('click',function () {
        $("div#slidebox1").animate({ opacity: .8, top: -200 }, 300);
        $(this).removeClass("slide1").addClass("selected");
    });

    $("li.selected").live('click', function () {
        $("div#slidebox1").animate({ opacity: 0 }, 300);
    });
});