Javascript 滑动切换发生后需要进行DIV show/hide切换

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

我怎样才能使它在显示一组信息时，单击另一个“产品”div，当前信息滑入隐藏状态，切换产品信息，然后显示新信息。有道理吗

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

这是隐藏信息的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>

$（'a.showinfo'）。单击（函数（e）{
e、 预防默认值（）；
$（“html，body”）.animate（{scrollTop:100}，“slow”）；
$（“.selected_show”）.slideToggle（）；
var a_href='.+$（this.attr（'href'）；
$（'.product_info'）.hide（）；
$（a_href.show（）；
});

---

想法？

使用

幻灯片切换

的回调：

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