如何使用Javascript創建可摺疊的div？

Question

我已經添加了一個可摺疊的div到我的圖像。它只適用於一個圖像。

如果我再添加一張它不工作：

function expand(showHideDiv, switchTextDiv) { 
 
    
 
    var ele = document.getElementById(showHideDiv); 
 
    var text = document.getElementById(switchTextDiv); 
 
    if (ele.style.display == "block") { 
 
    ele.style.display = "none"; 
 
    text.innerHTML = "+"; 
 
    } else { 
 
    ele.style.display = "block"; 
 
    text.innerHTML = "-"; 
 
    } 
 
}

<h1 class="expand">Chart1<a id="expand" href="javascript:expand('expand-content','expand');" >+</a></h1> 
 
<div id="expand-content" style="display: none;"> 
 
    <img src="imagelink" width="100%"> 
 
</div> 
 

 
<h1 class="expand">Chart2<a id="expand" href="javascript:expand('expand-content','expand');" >+</a></h1> 
 
<div id="expand-content" style="display: none;"> 
 
    <img src="imagelink" width="100%"> 
 
</div>

Answer 1

如何使用jQuery的它。這很容易。

實施例：http://jsfiddle.net/jansian/vuz46sLc/

HTML代碼：

<a href="#" class="lnkToggle"><h1>BMR Chart +</h1></a> 
<div class="collapse" style="display: none;"> 
    <img src="http://www.labwise.in/devel/media/bmr.jpg" width="100%"> 
</div> 

<a href="#" class="lnkToggle"><h1>BMI Chart +</h1></a> 
<div class="collapse" style="display: none;"> 
    <img src="http://www.labwise.in/devel/media/BMI_Chart.png" width="100%"> 
</div> 

JQuery的：

$(".lnkToggle").click(function(){ 
    $(this).next().toggle("slow", function() { 
     // Animation complete. 
    }); 
}); 

Answer 2

使用不同的ID標籤。

<h1 class="expand">BMR Chart<a id="expand" href="javascript:expand('expand-content','expand');" >+</a></h1> 
<div id="expand-content" style="display: none;"><img src="http://www.labwise.in/devel/media/bmr.jpg" width="100%"></div> 

<h1 class="expand">BMI Chart<a id="expand2" href="javascript:expand('expand-content2','expand2');" >+</a></h1> 
<div id="expand-content2" style="display: none;"><img src="http://www.labwise.in/devel/media/BMI_Chart.png" width="100%"></div> 

Answer 3

看看你的代碼...它不好爲不同的元素添加相同的id值。將id值更改爲其他值，然後使用新值嘗試相同的JavaScript代碼。