Target child element of parent on click using Pure Javascript

Question

I would like to create accordion using Vanilla JS, but I don't know how, I'm stucked.

My problem is I can't target class "accordion-text" but inside clicked element with class "accordion".

I've tried using querySelector but that's only for first element, and my toggle works only for first class.

If you click on Accordion 2, 3, 4 you will see only 1. Accordion toggling.

https://jsfiddle.net/ntcywngo/12/

HTML:

<div class="accordion">
    <h1>ACCORDION 1</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 2</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 3</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 4</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 5</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

CSS:

.accordion {
  position: relative;
  margin-bottom: 50px;
}
.accordion-text {
  display: none;
  position: absolute;
  left: -1px;
  top: 35px;
  z-index: 100;
}

 .active-accordion-text { 
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    border: 0;
  }

JS:

var accordionElements = document.getElementsByClassName('accordion');

for (var i = 0; i < accordionElements.length; i++) {
    accordionElements.item(i).addEventListener('click', function () {
        document.querySelector('.accordion-text').classList.toggle('active-accordion-text');
   });

};

Answer 1

The problem seems to be with document.querySelector .It will always select the first matched element from the dom.Replaced it with this.querySelector

 var accordionElements = document.getElementsByClassName('accordion'); for (var i = 0; i < accordionElements.length; i++) { accordionElements.item(i).addEventListener('click', function() { this.querySelector('.accordion-text').classList.toggle('active-accordion-text'); }); }; 

 .accordion { position: relative; margin-bottom: 50px; } .accordion-text { display: none; position: absolute; left: -1px; top: 35px; z-index: 100; } .active-accordion-text { display: block; position: relative; left: auto; top: auto; width: 100%; border: 0; } 

 <div class="accordion"> <h1>ACCORDION 1</h1> <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div> </div> <div class="accordion"> <h1>ACCORDION 2</h1> <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div> </div> <div class="accordion"> <h1>ACCORDION 3</h1> <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div> </div> <div class="accordion"> <h1>ACCORDION 4</h1> <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div> </div> <div class="accordion"> <h1>ACCORDION 5</h1> <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div> </div>