Using link or span to toggle

by Michel Plungjan

HTML

Click to see<br/>

<a href="pleaseenablejs.html" data-div="x001" 
 class="expand">[+/-] Hide/Show Info 1 link</a> 
<a href="pleaseenablejs.html" data-div="x002" 
 class="expand">[+/-] Hide/Show Info 2 link </a> 
<hr/>
<span data-div="x001" 
 class="expand">[+/-] Hide/Show Info 1 span</span> 
<span data-div="x002" 
 class="expand">[+/-] Hide/Show Info 2 span </span> 
<hr/>
<div class="expandable" id="x001">Info 1</div>

<div class="expandable" id="x002">Info 2</div>

CSS

span.expand { text-decoration:underline; cursor:pointer; color:blue }
.expandable { display:none }

JavaScript

window.onload=function() {
  var links = document.querySelectorAll(".expand");
  for (var i=0;i<links.length;i++) {
   links[i].onclick=function(e) {
     e.preventDefault();  
     var ele = document.getElementById(this.getAttribute("data-div"));
     if (ele) ele.style.display = ele.style.display == "block"?"none":"block";
   }
  }
}