How to create a collapsible div using Javascript? -

i have added collapsible div images. working 1 image.

if add image not working:

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>

how using jquery it. easier.

example: http://jsfiddle.net/jansian/vuz46slc/

html code:

<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.     }); });