Custom toggle function in Pure JavaScript

Here, why toggle approach in not working ?

I am trying to run custom function and loop this function in pure JavaScript.

I am expecting Jquery toggle. When header is clicked then add dsplyBlck to it’s child article, remove dsplyBlck to it’s child article when header is re-click.

window.onload = function(){
  var hdr = document.querySelectorAll('header');
  for(var i=0; i<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);
  })
}

.dsplyNne{
  display:none;
}
.crsr{
  cursor:pointer;
}
.dsplyBlck{
  display:block;
}

<section>
  <header class='crsr'>
    Header
  </header>
  <article class='dsplyNne'>
    Details
  </article>
</section>
<section>
  <header class='crsr'>
    Header
  </header>
  <article class='dsplyNne'>
    Details
  </article>
</section>

Answer

I have rewritten the javascript. Documentation in the source.

window.onload = () => {
  // Capture the header elements in an array
  const hdr = [...document.querySelectorAll('header')];
  // Add an eventlistener for each header element
  hdr.map( (h) => {
    h.addEventListener( "click", (e) => {
      // Toggle the class for the next sibling (article)
      const t = e.currentTarget.nextElementSibling;
      t.classList.toggle("dsplyNne");
    });
  });
}

.dsplyNne {
  display: none;
}

.crsr {
  cursor: pointer;
}

.dsplyBlck {
  display: block;
}

<section>
  <header class='crsr'>
    Header
  </header>
  <article class='dsplyNne'>
    Details
  </article>
</section>
<section>
  <header class='crsr'>
    Header
  </header>
  <article class='dsplyNne'>
    Details
  </article>
</section>