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

user_13920426 0
Viewed 453

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'));
   
}
nodelist arrays dom javascript
3 Answers

You can pass as parameter the event.target of the element clicked, try this:

const f = (el) => {
    console.log(el)
    el.classList.toggle('hidden')
}
<h5 class="card-title" onClick="f(event.target)">pikachu</h5>

user_136623390

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>

user_74863130

From what I understand, when clicking on an element, like a button, you want to toggle a class on that element that was clicked?

If this is that case, you would want to do something like this.

HTML: When adding the onClick function, take "this" as a parameter. This will send the object being clicked as a parameter to the function being called.

<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(this)" 
class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
   <p>skill skill</p>
  </div>
</div>

Javascript: This is the function being called when the object is clicked. As you can see, it has a parameter which is the object that was clicked. We can take this and toggle the class.

function showSkills(_this) {
    _this.classList.toggle('hidden');
}

Here's a JSFiddle Example: https://jsfiddle.net/vhu9xfLz/

user_107612130
Related