How to toggle a class from a single element in a node list in javascript

Question

I'm trying to toggle a class "hidden" to a single element once you clicked on it. Here is my code which toggle all elements with the class. How to toggle only the element clicked ? thanks.

 <div class="card">
      <div class="card-body">
        <h5 class="card-title">pikachu</h5>
        <p class="card-text">lorem ipsum</p>
        <button id="btn" onClick="showSkills()" class="btn btn-primary">Skills</button>
      </div>
      <div id='text' class='skills hidden'>
       <p>skill skill</p>
      </div>
 </div>

My javascript code:

const showSkills = () => {

    Array.from(document.querySelectorAll('#text')).forEach((el) => el.classList.toggle('hidden'));
   
}

Answer 1

You can get the card-body element of the clicked button using parentNode, and then get its neighbor #text to toggle its classList:

const showSkills = e => {
  const cardBody = e.target.parentNode;
  const skills = cardBody.nextElementSibling;
  skills.classList.toggle('hidden');
}

.hidden{display:none;}

<div class="card">
  <div class="card-body">
    <h5 class="card-title">pikachu</h5>
    <p class="card-text">lorem ipsum</p>
    <button id="btn" onClick="showSkills(event)" class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
    <p>skill skill</p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">pikachu</h5>
    <p class="card-text">lorem ipsum</p>
    <button id="btn" onClick="showSkills(event)" class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
    <p><span>skill</span> <span>skill</span></p>
  </div>
</div>