Search code examples
javascripttoggleclassname

Toggle elements from classes with JS


I would like to show more information when someone click on show more buttons. The complication is that there are several buttons and informations to toggle with same className. What am I doing wrong??

var element = document.querySelectorAll("btn");
for (var i = 0; i < button_length ; i++) {
   element[i].addEventListener("click", function() {
   alert("Button Clicked " + i);
   element[i].classList.toggle("extrainfo");
};
}
 td{border:solid 1px black;}
 .btn, #btn_id{color:blue; text-decoration:underline; cursor:pointer;}
 
.extrainfo{
  display:none
}
<table>

  <tbody>
    <tr class="info_group">
      <td>Title 1</td>
      <td class="btn">show more</td>
    </tr>
    <tr>
      <td class="extrainfo" colspan="2">More info 1</td>
    </tr>
   </tbody>
   
     <tbody>
    <tr class="info_group">
      <td>Title 2</td>
      <td class="btn">show more</td>
    </tr>
    <tr>
      <td class="extrainfo" colspan="2">More info 2</td>
    </tr>
   </tbody>
   
     <tbody>
    <tr class="info_group">
      <td>Title 3</td>
      <td class="btn">show more</td>
    </tr>
    <tr>
      <td class="extrainfo" colspan="2">More info 3</td>
    </tr>
   </tbody>
  
</table>


Solution

  • to work you javaScript

    var element = document.querySelectorAll("btn"); // need to be (".btn")
    
    // you want it to be i < element.length; ? or there's a variable called button_length?
    for (var i = 0; i < button_length ; i++) { 
           element[i].addEventListener("click", function() {
           alert("Button Clicked " + i);
           element[i].classList.toggle("extrainfo");
        }; // missing a Parenthesis need to be this }); not this };
        }
    

    I'm still not sure about the functionality, but see the code below if that's what you're looking for.

    var element = document.querySelectorAll(".btn");
    var extraInfo = document.querySelectorAll(".extrainfo");
    
    for (let i = 0; i < element.length; i++) {
       element[i].addEventListener("click" , function() {
       extraInfo[i].classList.toggle("extrainfo");
       });
    }
    

    hereJSFiddle you can play around with the code