showing and hiding something on slide toggle in jquery

Question

i have a panel having slide toggle effect on click of a button along with this slide toggle i am also hiding one div on the click event what i want when the panel slide down that div should hide and when panel slide up the div reappear how to do this

Answer 1

You could use callbacks and .toggle(), say your <div>s looked like this for illsutration:

<button>Toggle</button>
<div id="one">Hi! I'm div #one, how ya doin?</div>
<div id="two">I show only when one is gone</div>

You could do this:

​$("button").toggle(function() {
    $("#two").hide();
    $("#one").slideDown();
}, function() {
    $("#one").slideUp(function() {
       $("#two").show(); 
    });
});​​​

You can give that a try here, or you could change them out if they're meant to occupy the same area by .slideToggle() on both, like this:

$("button").click(function() {
    $("#one, #two").slideToggle();
});​

You can give that a try here.