How to grab more than one div and make them invisible?

Can someone help me out with the following issue?

I am trying to create a table with some hidden content in it and display them when someone click on one of the rows. I managed to create it but it is working only if I want to hide and display just 1 element, but the goal is to hide and display 5 different elements (span).

Here is my try, and as I mentioned it is party working but I have missed something obvious I think.

function hiddenTh() {
  var x = document.getElementById("hidden-th");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

<section id="course-list">
  <div class="table-responsive">
    <table class="table table-hover course-list-table tablesorter">
      <!--tablesorter class removed-->
      <thead>
        <tr>
          <th class="header">Képzés</th>
          <th class="header">Óraszám</th>
          <th class="header">Helyszín</th>
          <th class="header">Képző</th>
          <th class="header">Kezdés, időpontok</th>
          <th class="header">Óradíj</th>
          <th class="header">Jelentkezés és információ</th>


        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="course-title" onclick="hiddenTh()">Autogén tréning sajátélmény <br><span class="hidden-th" id="hidden-th">100 órás képzés részeként</span></th>
          <th class="course-category" onclick="hiddenTh()">30 óra</th>
          <th class="course-title" onclick="hiddenTh()">Budapest <br><span class="hidden-th" id="hidden-th">Szentkirályi u. 10.</span></th>
          <th class="course-category" onclick="hiddenTh()">Lipárdy Krisztina <br><span class="hidden-th" id="hidden-th"><a href="mailto:xy.xy@xy.com" target="_blank">xy.xy@xy.com</a></span></th>
          <th class="course-title" onclick="hiddenTh()">Kedzés: 2021. szeptember <br><span class="hidden-th" id="hidden-th">hétfőn 16 óra után hetente</span></th>
          <th class="course-category" onclick="hiddenTh()">2300 Ft /tanóra</th>
          <th class="course-title" onclick="hiddenTh()">BETELT A CSOPORT <br><span class="hidden-th" id="hidden-th">Előfeltétel: pszichológus végzettség és első interjú</span></th>
        </tr>

I have already tried with getElementsbyClassName but it didn’t worked for me. I think the problem is that var x can contain only 1 element. I tried to create a string of it, but I faild. Can someone help to find the rigth direction? Thanks in advance!

Answer

If you want to select all elements with a certain class name you can use: document.querySelectorAll('.classname') Please note the initial dot (.), which is the CSS selector for classes. So in your case, you can do:

const elements = document.querySelectorAll('.hidden-th')
for(const x of elements){
    if (x.style.display === "block") {
       x.style.display = "none";
    } else {
       x.style.display = "block";
    }
}

Advertisement

Answer