JQuery: Toggle question

Question

How do you fire a JQuery toggled event once, and only once, another JQuery toggled event has been completed?

I have the following:

• I have <div id="displayDivWhenPageLoads">...</div> - this DIV is show (visible) when the web page loads.
• I also have <div id="displayDivWhenToggledSelected">...</div> - this DIV is hidden (display:none) when the web page first loads.

What I want to do is when someone presses my JQuery toggle action button, it

1. toggles the div=displayDivWhenPageLoads so that the div is no longer displayed (display:none)
2. Then once, and only once, the displayDivWhenPageLoads DIV has been toggled so that it's no longer visible, then toggled the div=displayDivWhenToggledSelected so that this div now becomes toggled visibile.

Make sense?

I've been looking at the API http://docs.jquery.com/Effects/slideToggle#speedcallback and it's just not clear to me on how to fire off a second toggled once the first toggled has been completed.

Answer 1

I think I follow what you're asking for. You need to use callback functions. Try this:

$('#actionButton').click(function() {
  $('#displayDivWhenPageLoads').slideUp('slow', function() {
    $('#displayDivWhenToggledSelected').slideDown('slow');
  });
});

Answer 2

Try this

 $("#actionButton").click(function(){  
  $("#displayDivWhenPageLoads"). slideToggle({
    speed:"slow",
    callback : "ToggleOther"
  })
  return false;
 })

function ToggleOther()
{
  $("#displayDivWhenToggledSelected "). slideToggle("slow");
}