Custom toggle function in Pure JavaScript

Question

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>

use elem.classList.toggle? your code adds a new listener every time by the way - so you end up with multiple elm.classList.remove('dsplyBlck'); every time you click — Jaromanda X
– Jaromanda X, Commented Sep 11, 2020 at 4:31
Use document.addEventListener( 'DOMContentLoaded', func ). Avoid using window.onload = - it's a legacy and obsolete way of listening to events (and it doesn't support multicast). — Dai
– Dai, Commented Sep 11, 2020 at 4:32

Gerard · Accepted Answer · 2020-09-11 05:06:45Z

1

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>

edited Sep 11, 2020 at 5:06

answered Sep 11, 2020 at 5:00

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hgb123 · Accepted Answer · 2020-09-11 04:38:35Z

You just have to simplify these by using Element.classList.toggle('YOUR_CLASS') (doc)

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');
      elm.classList.toggle('dsplyBlck');
    }
  }
}

<html>

<head>
  <style>
    .dsplyNne {
      display: none;
    }
    
    .crsr {
      cursor: pointer;
    }
    
    .dsplyBlck {
      display: block;
    }
  </style>
</head>

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

</html>

Emy · Accepted Answer · 2020-09-11 05:03:27Z

solution:

function toggleElm(elem) {
  let x = document.getElementById(elem);
  if (x.classList.contains('dsplyBlck')) {
    x.classList.add('dsplyNne');
    x.classList.remove('dsplyBlck');
  } else {
    x.classList.add('dsplyBlck');
    x.classList.remove('dsplyNne');
  }
}

<html>
  <head>
    <style>
      .dsplyNne{
        display:none;
      }
      .crsr{
        cursor:pointer;
      }
      .dsplyBlck{
        display:block;
      }
    </style>
  </head>
  <body>
    <section>
      <header class='crsr' onclick="toggleElm('target1')">
        Header
      </header>
      <article class='dsplyNne' id="target1">
        Details
      </article>
    </section>
    <section>
      <header class='crsr' onclick="toggleElm('target2')">
        Header
      </header>
      <article  class='dsplyNne' id="target2">
        Details
      </article>
    </section>
  </body>
</html>

Collectives™ on Stack Overflow

Custom toggle function in Pure JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related