[jQuery] one div, multiple clicks

[mkauppinen]

Hi!

I have one div (.masterpiece) and now i can open it by click and close
it by move mouse out.

How I can make it so that it also close when i click it again (when
it's enlarged)?



        $(".masterpiece").bind("mouseenter",function(){

                $(".shade", this)
                        .animate({ opacity: "0.4" }, {duration: 500, queue: 
false});

        }).bind("click",function(){

                $(this)
                        .animate({ height: "450px" }, {duration: 500, easing:
"easeOutBounce", queue: false})
                        .css('zIndex', '10');

                $(".shade", this)
                        .animate({ opacity: "0" }, {duration: 500, queue: 
false});

                $("#bigshade")
                        .animate({ opacity: "0.8" }, {duration: 500, queue: 
false})
                        .css('zIndex', '5');

        }).bind("mouseleave",function(){

                $(this)
                        .animate({ height: "80px" }, {duration: 500, queue: 
false})
                        .css('zIndex', '1');

                $(".shade", this)
                        .animate({ opacity: "0.8" }, {duration: 500, queue: 
false});

                $("#bigshade")
                        .animate({ opacity: "0" }, {duration: 500, queue: 
false})
                        .css('zIndex', '0');

        });


Thanks!