Show and hide element and toggle icon with javascript

Question

When I am clicking on icon I want to toggle class invisible for paragraph and bold for h4. How can I loop through this? When I am trying I get only the first paragraph. Also can't change icon on click.

My code:

const btns = document.querySelectorAll('i');

btns.forEach((btn) => {
    btn.addEventListener('click', (e) => {

        const paragraph = document.querySelector('p');
        const h4 = document.querySelector('h4')

        h4.classList.toggle('bold');
        paragraph.classList.toggle('invisible');

        if (btn.classList.contains('hidden')) {
       btn.classList.remove('hidden');
        btn.classList.add('visible');
    }
    else if (btn.classList.contains('visible')) {
        btn.classList.remove('hidden');
        btn.classList.add('visible');
    }
    })
})

    .bold {
      font-weight: 700;
    }

    .invisible {
      display: none;
    }
    i.hidden {
    visibility: hidden;

}
    i.visible {
    visibility: visible;
}

    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div class="question">
    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div class="question">
    <div class="question">
      <h4>question<i class="fas fa-chevron-down"></i></h4>
      <p>answear</p>
    </div>

Answer 1

You can target the closest element with class question using Event.target from which you can find the respective elements:

 const btns = document.querySelectorAll('i'); btns.forEach((btn) => { btn.addEventListener('click', (e) => { const paragraph = e.target.closest('.question').querySelector('p'); const h4 = e.target.closest('.question').querySelector('h4') h4.classList.toggle('bold'); paragraph.classList.toggle('invisible'); //if you want the icon to be toggled e.target.classList.toggle('fa-chevron-up'); e.target.classList.toggle('fa-chevron-down'); }) })

 .bold { font-weight: 700; }.invisible { display: none; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous"> <div class="question"> <h4>question<i class="fas fa-chevron-down"></i></h4> <p>answear</p> </div class="question"> <div class="question"> <h4>question<i class="fas fa-chevron-down"></i></h4> <p>answear</p> </div class="question"> <div class="question"> <h4>question<i class="fas fa-chevron-down"></i></h4> <p>answear</p> </div>

Answer 2

I suggest you just toggle a class on the parent question and use class specific rules based on that parent class

 const btns = document.querySelectorAll('.question i'); btns.forEach((btn) => { btn.addEventListener('click', (e) => { const answer = e.target.closest('.question') answer.classList.toggle('collapsed'); }); });

 .question.collapsed h4 { font-weight: 700; color:red }.question.collapsed p { display: none; }

 <div class="question"> <h4>question<i class="fas fa-chevron-down">Icon</i></h4> <p>answear</p> </div> <div class="question"> <h4>question<i class="fas fa-chevron-down">Icon</i></h4> <p>answear</p> </div> <div class="question"> <h4>question<i class="fas fa-chevron-down">Icon</i></h4> <p>answear</p> </div>