CODEWITHSUNDEEP
javascript
RS92
RS92

Reputation: 27

Target child element of parent on click using Pure Javascript

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');
   });

};

Upvotes: 0

Views: 247

Answers (1)

brk
brk

Reputation: 50326

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>

Upvotes: 2

Related Questions