title: Expand/collapse all lists in jquery
body: <p>I'm trying to place a button on a webpage that uses jquery to structure collapsible lists to expand/collapse all lists. However, I'm fairly new to jquery and javascript coding so I've run into a few problems. I've placed the button in but the code for it is not responding and upon clicking it I receive this error in the inspector: "TypeError: HTMLInputElement is not a function (evaluating 'ShowHide()')" How would I go about correcting this code so it successfully expands/collapses?</p>
  
  <p>The code for the button is here:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.11.2.min.js"&gt;
  document.getElementById('collapsible').addEventListener("click", ShowHide);
  
  var collapsed = $('collapsible').hide();
  
  function ShowHide(event) {
  
      if (collapsed == true) {
          $('collapsible').show();
          collapsed = false;
      }
      else {
          $('collapsible').hide();
          collapsed = true;
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The id "collapsible" is placed on each ul and li element that is being expanded/collapsed.</p>
  
  <p>The button is placed in as so:</p>
  
  <pre><code>&lt;input type="button" id="ShowHide" onclick="ShowHide()" value="Show/Hide"&gt;
  </code></pre>
  
  <p>EDIT: I've been trying to do an expand/collapse all to be used on this layout. jsfiddle.net/TLittler/9ndzm3cc</p>