title: show/hide div based on class name
body: <p>i have a show/hide div javascript function</p>
  
  <p>i want convert it to work with class name instead of style</p>
  
  <p>This is my function that i want convert it</p>
  
  <pre><code>&lt;script&gt;
  function toggle(e, id) {
      var el = document.getElementById(id);
      el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
      toggle.el = el;
      if (e.stopPropagation) e.stopPropagation();
      e.cancelBubble = true;
      return false;
  }
  document.onclick = function() {
      if (toggle.el) {
          toggle.el.style.display = 'none';
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>i want convert it to work with class name,</p>
  
  <p>for example:</p>
  
  <pre><code>#hidden{
  display:none;
  }
  #shown{
  display:block;
  }
  function toggle(e,id){
  if(el.class=='hidden'){
  el.setAttribute("class", "showen");
  }
  //etc...
  }
  </code></pre>