切換多個搜索區域和手柄圖標

Question

當我點擊<h2>時，我需要做的是切換每個搜索區域。

我還需要它在<h2> <span>元素上切換類圖標減號和圖標加號。 （這不會顯示在我的小提琴上，因爲它需要安裝的字體。）

在載入時，它應該只顯示顯示第一個搜索區域，其餘隱藏（顯示：無）。

它還必須能夠切換當前的搜索區域和圖標。

我有一個跛腳嘗試jsFiddle

Answer 1

你可以不喜歡這樣。你只需要添加一個.not()所以目前DIV沒有隱藏與其他

$('.s-container h2').on('click', function() { 
    var $el = $(this); 
    var div = $el.next('.s-area'); 
    $('.s-area').not(div).hide(); // hide all but the current one that is toggling 
    div.slideToggle('fast',function(){ 
     // add correct class accordingly to the h2 elemeents 
     $('.s-container h2').attr('class',function(){ 
      return $(this).next('.s-area').is(':visible') ? 'icon-minus' : 'icon-plus'; 
     }); 
    }); 
}); 

http://jsfiddle.net/3KESK/