简单的方法来滑动切换多个元素独立(和类似的问题)

Question

首先，我需要说明我对jQuery非常陌生。
我有这样的情况:http://jsfiddle.net/dVf8m/
我一直在想是否有一种方法来做slideToggle更简单。现在我在菜单元素(#trigger1和#trigger2)上有两个id，在隐藏div (#one和#two)上有两个id。这也导致了双重jQuery。是否有可能避免所有的id并使其更简单?
另一件事是，如果我点击两个菜单元素(第一和第二)，两个div出现。我想一次只看到一个隐藏的潜水器?当另一个div出现时，我如何强制第一个div消失?
此外，如果我想使用fadeIn/fadeOut在这种情况下，如何做到这一点，当他们都使用。click事件?

Answer 1

将代码修改如下:为div创建一个类，并向其添加单击侦听器。为div添加任何属性，并给出要切换的div的id。

<div id="top">
    <ul>
      <li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
      <li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
      <li>Third</li>
    </ul>
</div>
<div class="hidden" id="item1">
        <ul>
            <li><a href="#">Smthn</a></li>
            <li><a href="#">Smthn2</a></li>
            <li><a href="#">Smthn3</a></li>
        </ul>
</div>
<div class="hidden" id="item2">
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">Orange</a></li>
            <li><a href="#">...</a></li>
        </ul>
</div>
$(document).ready(function() {
        $('.toggler').click(function(e) {            
            $("#"+$(this).attr("data-item")).slideToggle(500); 
        });
});

JSFIDDLE