Jquery add click to slide up panel?

I have the following slide panel, i've cobbled together using tutorials etc...

$(document).ready(function() {

$(".dropdown dt a").click(function() {
    $(".dropdown dd #panel").slideDown(150);
});

$(".dropdown dd #panel a").click(function() {

    $(".dropdown dd #panel").slideUp(150);

});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

However i cannot figure out how to click to bring up the panel.

Currently you click and the panel slides down, you go into the panel and out and it slides back up.

I want to add that once you've clicked to show panel, you can click to close it too?

So you have two ways of closing it, moving the mouse away,or clicking the button again. Perhaps adding a active class to so i could have an arrow or something changing to open then close?

Anyone help my out adding a click to slide back up function?

Many thanks if you can :)

Thanks guys.

Tried adding your code Brian but managed to break it altogether, i obviously haven't put it in the right place :(

edit

Adding Brians advice...

$(document).ready(function() {



$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasclass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});         


$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
         $(".d开发者_如何转开发ropdown dd #panel").slideUp(150); // <-- 1000ms  
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

---

You'll need to track the state of the panel because you have two close triggers (therefore a simple toggle listener won't suffice). You can add a js variable (ok, but not great) or use a class (better) to track it. Then conditionally test on you're click listeners to determine what to do:

$(".dropdown dt a").click(function(){
    if($(".dropdown dd #panel").hasClass('open'){
        $(".dropdown dd #panel").slideDown(150).addClass('open');
    } else {
       $(".dropdown dd #panel").slideUp(150).removeClass('open');
    }
});

Just make sure you add the removeClass method to the close listener you have on the interior anchor tag as well:

$(".dropdown dd #panel a").click(function() {
    $(".dropdown dd #panel").slideUp(150).removeClass('open');;
});

---

Take a look at example 4a http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/