jQuery來展開摺疊只已被點擊的div

Question

我公司擁有一批在頁面上的div，我想摺疊和展開，當用戶點擊「展開[+]」

下面的代碼工作的一個DIV

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4> 
<div id="profile-section" style="overflow:hidden;"> 
some stuff 
</div> 

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery(".expanderHead").click(function(){ 
    if (jQuery(".expanderSign").text() == "Expand [+]") 
    { 
    jQuery("#profile-section").removeClass("height-min"); 
    jQuery("#profile-section").addClass("height-auto"); 
    } 
    else 
    { 
    jQuery("#profile-section").removeClass("height-auto"); 
    jQuery("#profile-section").addClass("height-min"); 
    } 

    if (jQuery(".expanderSign").text() == "Expand [+]"){ 
     jQuery(".expanderSign").text("Collapse [-]"); 
    } 
    else { 
     jQuery(".expanderSign").text("Expand [+]"); 
    } 


}); 
}); 
</script> 

如果我再有一些頁面上的div這樣

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4> 
<div id="profile-section1" style="overflow:hidden;"> 
some stuff 
</div> 

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4> 
<div id="profile-section2" style="overflow:hidden;"> 
some stuff 
</div> 

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4> 
<div id="profile-section3" style="overflow:hidden;"> 
some stuff 
</div> 

etc.... 

如何修改我的jQuery，使其適用於所有這些div的獨立。即它只會最小化或最大化已被點擊的div？

我已經嘗試了使用（this）和parent（）以及child（）的一些不同組合，但是我似乎無法弄清楚它的正確性。

幫助，將不勝感激:)

Answer 1

感謝所有的建議。最後我去了手風琴 - http://jqueryui.com/accordion/

不完全是我原來以後，但它運作良好。

Answer 2

使用context with jquery selector到事件的電流源下訪問元素。

語法：jQuery的（選擇[，上下文]）

變化

jQuery(".expanderSign").text() 

爲

jQuery(".expanderSign", this).text() 

Answer 3

您應該使用$(this)定位在你點擊的div處。

例如：

$(".expanderHead").on('click', function(){ 
    $(this).hide(); 
}); 

在這種情況下，你會點擊的股利將會消失

。使用.on()而不是.click()。

Answer 4

您可以通過使用肘和靶向下一格像這樣把它簡化：

<h4 class="expanderHead">Contact information <span class="expanderSign" style="cursor:pointer;">[+]</span></h4> 
<div class="expanderContent">some stuff</div> 

$(".expanderContent").hide(); 
$(".expanderSign").on('click', function() { 
    $(this).text($(this).text() == '[+]' ? '[-]' : '[+]'); 
    $(this).parent().next("div").toggle(); 
}); 

Example