Ordering multiple events on a single function...

Ordering multiple events on a single function...

   
    
    
  1.  $(document).ready(function(){
    2. 
    
  2. $(".slide-button-one").click(function(){
    3. 
    
    4. 
    
    
  4. $("#main-content-info").slideToggle(800);
    5. 
    
  5. $("#main-content-portfolio").toggle();
    6. 
    
  6. return false;
    7. 
    
  7. });
    8. 
    
  8. });
    9.
Here is the application for this javascript.

When the .slide-button-one (top 'Profile', 'Clients' or 'Contact' links) is clicked, #main-content-portfolio (white-background div) slides down and the display is set to none. This reveals #main-content-info (grey-background div).

Currently however, the display value of  #main-content-portfolio is set to none BEFORE the slide. How can I switch this order of events?

Any ideas would be much appreciated.