Навигация боковой панели

Question

и, похоже, пока еще не обволакивают его. У меня есть бортовой навигатор с содержимым. я хотел бы, чтобы содержимое отображалось при нажатии на родительское меню, поэтому нужно было скрыть другие коненты. При нажатии другого родительского меню остальные скрываются.

вот CSS

.sidebarContainer { 
    position: relative; 
    background: #f1f2f3; 
    width: 80%; 
    margin:auto; 
    margin-bottom: 2%; 
    padding: 1%;    
    overflow: hidden; 
    border:blue; 
    height:auto; 
    clear:both; 
    border:5px solid yellow; 

} 
.sidebarheading { 
    width:15% auto; 
    border:5px solid green; 
} 
.sidebarContainer .sidebarheading > .sidebarContent { 
    position:relative; 
    float: right;    
    border:5px solid red; 
    right:450px; 

Вот HTML-

<div class="sidebarContainer">  
<div class="sidebarheading">   
    <h1>Heading1</h1> 
     <div class="sidebarContent"> 
      <p class="content2">Hey Wassup</p> 
     </div> 
</div> 


<div class="sidebarheading"> 
    <h1>Heading2</h1> 
     <div class="sidebarContent"> 
      <p class="content1">Hey Wassup</p> 
     </div> 
</div> 

здесь является JQuery

<script> 
$(document).ready(function() { 
    $('.sidebarheading').click(function() { 
     $('.sidebarContent').hide('slow', function() { 
      $('.sidebarContent').html($('sidebarContent').html()); 
      $('.sidebarContent').fadeIn('slow'); 
     }) 
    }) 
}) 

граница для целей тестирования. Любая помощь будет оценена :)

Answer 1

Нравится?

$(document).ready(function() { 
    $('.sidebarContent:gt(0)').hide(); // Show the first one by default 

    $('.sidebarheading').click(function() { 
     var $this = $(this); 
     $('.sidebarContent').hide('slow', function() { // On click hide all 
      $this.find('.sidebarContent').fadeIn('slow'); //show the content which is inside the clicked heading. 
     }) 
    }) 
}) 

Fiddle