divを展開して別のコンテンツを表示する

Question

各メニュー項目を展開して別のコンテンツを表示したい場合は、1つのメニュー項目が機能します。しかし、メニュー項目2をクリックすると、現在の展開されたdivを閉じて、新しいdivを展開します。各メニュー項目をクリックすると、それぞれのコンテンツ・ディビジョンが上に開きます。

私がウェルカムコンテンツのコンテンツを表示するために使用しているものです。事前に

jQuery(function($) { 
    var open = false; 
    $('.slide_button_welcome').click(function() { 
     if(open === false) { 
      $('.slide_welcome').animate({ height: '100%' } 
      , 400, 'easeOutCirc'); 
      $(this).css('backgroundPosition', 'bottom left'); 
      open = true; 
      return false; 
     } else { 
      $('.slide_welcome').animate({ height: '0px' } 
      , 400, 'easeOutCirc'); 
      $(this).css('backgroundPosition', 'top left'); 
      open = false; 
      return false; 
     } 
    });  
}); 

おかげで、任意のヘルプは素晴らしいことです。

相続人を参照するセクションイムのためのHTML：

<!-- BEGIN #primary_nav --> 
<div id="primary_nav"> 
    <div id="primary_nav_wrap"> 
     <nav> 
      <ul> 
       <li><a class="slide_button_welcome" href="#">Welcome</a></li> 
       <li><a href="#">News</a></li> 
       <li><a class="slide_button_gallery" href="#">Gallery</a></li> 
       <li><a href="#">Bridal</a></li> 
       <li><a href="#">Shop</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul>  
     </nav> 
    </div> 
</div> 
<!-- End #primary_nav --> 


<!-- BEGIN #slide_container --> 
<div id="content_slider"> 

    <!-- BEGIN Welcome --> 
    <div class="slide_welcome"> 
     <div class="slide_inner"> 
      <h1>Gill Clement</h1> 
      <p>Gill designs and creates her jewellery from her studio outlet in the village of Mumbles, set at the Western end of Swansea Bay. A Jewellery Graduate from London’s Sir John Cass School of art in 1982, Gill came away with a reputation for innovation and experiment, constantly exploring the cutting edge and pushing boundaries of the profession that has become her life. 
      </p> 
      <p>Gill’s work has been recognised and heraled throughout her career, with extensive sales worldwide, from London to New york to Japan. 
      Examples of Gill’s work can be found in permanent collections 
      at the Museum of Wales, Birmingham City Art Gallery and the 
      Contemporary Arts Society.</p>    
     </div> 
    </div> 
    <!-- End Welcome --> 

    <!-- BEGIN Gallery --> 
    <div class="slide_gallery"> 
     <div class="slide_inner"> 
      <h1>Gallery</h1> 
      <p>Lorem ipsum dolor sit amet consectetuer adipi scing elit, sed diam non numy nibh euismod tempor incidunt ut labore et dolore mahna ali quam erat volupat ostrud exerci tatiuon ullamcorper suscipit laboris nisl ut aliquip ex ea com modo consequat. Duis autem novel seum irure dolor in henderit.</p> 

      <!-- BEGIN jCarousel --> 
      <ul id="mycarousel" class="jcarousel-skin-tango"> 
       <li> 
        <a href="#"> 
         <span class="post-thumb-overlay"></span> 
         <img src="img/gallery/gallery_thumb_01.jpg" alt="" width="224px" height="360px" />'; 
        </a> 
       </li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li>     
      </ul> 
      <!-- End jCarousel --> 

     </div> 
    </div> 
    <!-- End Gallery --> 


</div>  
<!-- End #slide_container --> 

Answer 1

私は理解している願っています。 "li"をクリックしてすべてのdivを非表示にし、必要な "div"のみを表示することが可能です "divs"コンテナにも同じクラスがあります。この場合は "content"

これは問題がなかった場合

jQuery(function($) { 
    var open = false; 
    $('.slide_button_welcome').click(function() { 
     if(open === false) { 
      $('.content').css('display', 'none'); 
      $('.slide_welcome').animate({ height: '100%' } 
      , 400, 'easeOutCirc'); 
      $(this).css('backgroundPosition', 'bottom left'); 
      open = true; 
      return false; 
     } else { 
      $('.slide_welcome').animate({ height: '0px' } 
      , 400, 'easeOutCirc'); 
      $(this).css('backgroundPosition', 'top left'); 
      open = false; 
      return false; 
     } 
    });  
}); 



<!-- BEGIN #slide_container --> 
<div id="content_slider"> 

    <!-- BEGIN Welcome --> 
    <div class="content slide_welcome"> 
    </div> 
    <!-- End Welcome --> 

    <!-- BEGIN Gallery --> 
    <div class="content slide_gallery"> 

</div>  
<!-- End #slide_container --> 

、私はあなたがHTMLを提供することができ