jQuery .animate
<p>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.</p>

<p>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?  </p>

<pre><code>$(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);

    });
});
</code></pre>
