2 DIV's / 2 Functions...

2 DIV's / 2 Functions...

On my website there are two main divs and when any of the top header links are clicked one function happens to each of them:

- #main-content-info (black)
- #main-content-portfolio (white)

The jQuery .slideToggle's the black div in to view, THEN .toggle's the display of the white div. In that order.

Here's the code:

  1. $(document).ready(function(){
  2.  $(".slide-button-one").click(function(){
  3.  $("#main-content-info").slideToggle(800,function(){
  4.  $("#main-content-portfolio").toggle();
  5.  });
  6.  return false;
  7.  });
  8. });

So the function has two states:

1. the #main-content-info (black div) slides into view, then AFTER this slide, #main-content-portfolio (white div) disappears. This is as I want it.

However, when the function makes the journey back to the original state...

2. #main-content-info (black div) slides back out of view, then AFTER the slide, #main-content-info (white div) reappears.

This is where I have a problem as I would like the second state to perform the functions in the revers order so it would be like this:

2. #main-content-portfolio (white div) reappears, then AFTER the white div appears main-content-info (black div) slides back out of view.

It's not so much of fixing a random bug with the code – I'm just stumped as to how I can make this happen. Maybe I need some class toggling?

Thanks again for the help so far.

Thanks