title: Expand Collapse Div list
body: <p>I am trying to expand/collapse list items. Text will be word followed by definition sort of where definition appears/disappears on click on word. This is my code so far : </p>
  
  <pre><code>&lt;html&gt;
  &lt;script type="text/javascript"&gt;
  
  function toggleVisibility(listItem) {
  var listItemDiv = document.getElementById(listItem);
  
  if(listItemDiv.style.visibility == 'hidden') {
          listItemDiv.style.visibility = 'visible';
      } else {
          listItemDiv.style.visibility = 'hidden';
      }
  
  
  }
  
  &lt;/script&gt;
  
  &lt;div onclick="toggleVisibility('p1')"&gt;p1&lt;/div&gt;&lt;div id=p1&gt;p1's text&lt;/div&gt;&lt;/br&gt;
  p2&lt;div id=p2&gt;p2's text&lt;/div&gt;&lt;/br&gt;
  p3&lt;div id=p3&gt;p3's text&lt;/div&gt;&lt;/br&gt;
  p4&lt;div id=p4&gt;p4's text&lt;/div&gt;&lt;/br&gt;
  p5&lt;div id=p5&gt;p5's text&lt;/div&gt;&lt;/br&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>However this code hides my text isntead of collapse/expand. I wish to achieve this through javascript preferably. </p>