需要DIV显示/隐藏切换发生后发生SlideToggle

Question

我有一系列的“产品”格在网格中，其中每个都是可点击的。点击时，相应的“产品信息”DIV滑下以显示相应的产品信息。我有它的工作，但我有几个问题。

我该如何做到这一点，当一组信息显示，但另一个“产品”div被点击，当前信息滑入隐藏状态，产品信息切换，然后显示新信息。合理？

如果下面的代码没有意义，直接链接是here

这是隐藏信息的HTML。类'selected_show'的样式是“display：none;”开始：

<section> 
     <div class=selected_show> 
      <div> 
       <div class="product_info grassone piece_info"> 
        <img src="./images/detail_info/astronomical.jpg"> 
        <div> 
         <p>Short description of the piece...</p> 
        </div> 
       </div> 
      </div> 

      <div> 
       <div class="product_info competitive piece_info"> 
        <img src="./images/detail_info/astronomical.jpg"> 
        <div style="background:red;"> 
         <p>Short description of the piece...</p> 
        </div> 
       </div> 
      </div> 

      <div> 
       <div class="product_info magpie piece_info"> 
        <img src="./images/detail_info/astronomical.jpg"> 
        <div style="background:blue;"> 
         <p>Short description of the piece...</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

这就是信息选择：

<section> 
     <div class="piece woodcut"> 
     <a href="grassone" class="showinfo"><p>GRASSONE</p></a> 
     </div> 

     <div class="piece woodcut"> 
     <a href="competitive" class="showinfo"><p>COMPETITIVE</p></a> 
     </div> 

     <div class="piece woodcut"> 
     <a href="magpie" class="showinfo"><p>MAGPIE</p></a> 
     </div> 

</section> 

这是影响该脚本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 

    $('a.showinfo').click(function(e){ 
    e.preventDefault(); 
      $("html, body").animate({ scrollTop: 100 }, "slow");   
     $(".selected_show").slideToggle(); 

    var a_href = '.'+ $(this).attr('href'); 
     $('.product_info').hide(); 
     $(a_href).show(); 
    }); 

    </script> 

想法？

Answer 1

使用slideToggle的回调：

$(".selected_show").slideToggle(1000, function(){ 
    $('.product_info').hide(); 
});