divsをjavascriptで折りたたんで隠すすべて

Question

私はコンテンツを持つdivsを作っています。問題はすべてのdivを折りたたむ方法です。 ここで問題となるのは、divをいくつ作成するのかわからないため、コードを動的にする必要があるということです。ページがロードされたときに

function pageLoad() 

var j = 1; while(j>0) 

collapseAll($('div'+j,'divx',+j)); 
j++; 

この部分は崩壊を処理します。ここではまず

は私のjavascriptのです。すべてのdivを折りたたむ必要があります。 コードでは、このようにする必要があります：

<a onclick="div('div1');" > //this at first time 
<div id="div1"> 
content 
</div>  
<a onclick="divx('divx1'); 
<div id="divx1"> 
content 
</div> 
<!-- this at next when div is created --> 
<a onclick="div('div2');" > 
<div id="div2"> 
content 
</div> 
<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div> 

など...ここでの問題は、コードが新しいdiv要素を作成するとき、それは以前の部分で使用されているdiv要素に同じ名前を与えることです。

forexample：

<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div> 

//new div created: 
<a onclick="divx('divx2'); "> 
<div id="divx2"> 
content 
</div> 

Answer 1

あなたは次のようなものでこれを達成することができました。 jQuery（http://jquery.com）が必要であることに注意してください。

<script> 
$(function() { 
    $('a.collapse').click(function() { 
     $(this).closest('.collapsible').find('.collapse-container').toggle(); 
    }); 

    $('a#collapse-all').click(function() { 
     $('.collapse-container').hide(); 
    }); 

    // Added: Collapse all on load. 
    $('.collapse-container').hide(); 
}); 
</script> 

<div class="collapsible"> 
    <a class="collapse" href="#">Click to expand/collapse</a> 
    <div class="collapse-container"> 
     content 
    </div> 
</div> 

<div class="collapsible"> 
    <a class="collapse" href="#">Click to expand/collapse</a> 
    <div class="collapse-container"> 
     content 
    </div> 
</div> 

<a id="collapse-all" href="#">Click to collapse all</a> 

Answer 2

あなたは属性を使用することができセレクターで始まり、そのIDのdivで始まるすべてのdivターゲッティングことによって自分自身タイピングの多くを保存します。私はあなたがそれに余分なマークアップを必要としないと思う

$('a').click(function(){ 
    //do something to all the divs, hide them for example 
    $('div[id^="div"']).hide(); 
    //hide only the next div: 
    $(this).next('div[id^="div"']).hide() 
    //hide all the divs until the nezt <a> 
    $(this).nextUntil('a').hide(); 

});