title: Custom toggle function in Pure JavaScript
body: <p>Here, why toggle approach in not working ?</p>
  <p>I am trying to run custom function and loop this function in pure JavaScript.</p>
  <p>I am expecting Jquery toggle. When header is clicked then add <code>dsplyBlck</code> to it's child article, remove <code>dsplyBlck</code> to it's child article when header is re-click.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function(){
    var hdr = document.querySelectorAll('header');
    for(var i=0; i&lt;hdr.length; i++){
      hdr[i].onclick = function(){
        var elm = this.closest('section').querySelector('article');
        tgglArticle(elm,this);
      }
    }
  }
  
  function tgglArticle(elm, hdr){
    elm.classList.add('dsplyBlck');
    hdr.addEventListener('click',function(){
      console.log('Here message is displaying, but remove class not working');
      elm.classList.remove('dsplyBlck');
      tgglArticle(elm,hdr);
    })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dsplyNne{
    display:none;
  }
  .crsr{
    cursor:pointer;
  }
  .dsplyBlck{
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;header class='crsr'&gt;
      Header
    &lt;/header&gt;
    &lt;article class='dsplyNne'&gt;
      Details
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;header class='crsr'&gt;
      Header
    &lt;/header&gt;
    &lt;article class='dsplyNne'&gt;
      Details
    &lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>