Nested divs: making content visible

Nested divs: making content visible

I'm trying to debug a tabbed menu implementation, where I have a variety of pages that are made visible based on tab clicks.  This works well, until I have a page that is laid out with nested divs.  Any content beyond the child of the selected page (page_about shows 'Put an image here' but not 'This is where...') remains invisible.

I've tried a number of options in the slideDown statement, but failed thus far.

Thanks for any help,

Frank

The HTML excerpt looks thus:

<div class="boxBody">
   <div id="page_home" class="page show">
         <div id="slider" class="show">
<h1>Put some stuff here for the home page</h1>
           </div>
        </div>

   <div id="page_galleries" class="page">
        
<h1>This is where we put the stuff for the Galleries page!</h1>    
   </div>
  
   <div id="page_services" class="page">
<h1>This is where we put the stuff for the Services page!</h1>    
     </div>
  
<div id="page_about" class="page">
         <div id="aboutContent">
             <div id="aboutContentImg">
                <p>Put an image here</p>
                </div>
                <div id="aboutContentTxt">
<h1>This is where we put the stuff for the About page!</h1>
                </div>
             </div>
         <div id="aboutImg">
             <h2>This is some image</h2>
            </div>
   </div>
  
   <div id="page_proofs" class="page">
<h1>This is where we put the stuff for the Proofs page!</h1>  
   </div>        
  
   <div id="page_contact" class="page">
<h1>This is where we put the stuff for the Contact page!</h1> 
</div>
    
</div>

The ready function is:

$(document).ready(function() {


  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
        
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');
    
    //Reassign the LI
    $(this).addClass('selected');
    
    //Hide all the DIV in .boxBody
    $('.boxBody div.page').slideUp('1500');
    
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody > div:eq(' + $('#tabMenu > li').index(this) + ')').contents().andSelf().slideDown('1500');
    
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {
    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });

});