Show/hide Javascript Toggle in the same page problem. Multiple hidden texts shows up in the same time. Without JQuery

Question

This script works very well. But I want to show and hide different texts with different expand/hide links in the same multiple tables of the same page. Without JQuery this simple script is preferred. Thank you for your time and interest.

view code

Answer 1

If you want to toggle different hidden text in multiple tables using different links, here's an example:

function toggleText(textId) {
      var hiddenText = document.getElementById(textId);

      if (hiddenText.style.display === 'none' || hiddenText.style.display === '') {
        hiddenText.style.display = 'block';
      } else {
        hiddenText.style.display = 'none';
      }
    }

.hidden-text {
      display: none;
    }

   <table>
    <tr>
      <td>
        <a href="#" onclick="toggleText('text1')">Toggle Text 1</a>
        <div id="text1" class="hidden-text">
          <p>This is the hidden text for Text 1.</p>
        </div>
      </td>
    </tr>
    <!-- Add more tables as needed -->
  </table>

  <table>
    <tr>
      <td>
        <a href="#" onclick="toggleText('text2')">Toggle Text 2</a>
        <div id="text2" class="hidden-text">
          <p>This is the hidden text for Text 2.</p>
        </div>
      </td>
    </tr>
    <!-- Add more tables as needed -->
  </table>

Answer 2

Look into this code i tried this without jQuery. if you will include jquery it will be too easy task.

function toggleme(elementId) {
            var ele = document.getElementById(elementId);

            if (ele.style.display === "block" || ele.style.display === "") {
                ele.style.display = "none";
            } else {
                ele.style.display = "block";
            }
        }

body {
    font-family: Arial, sans-serif;
}

a {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    margin-right: 10px;
}

.hideme {
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

<a onclick="toggleme('toggleText1');">Show</a>
<div id="toggleText1" class="hideme" style="display: none">
    <h1>Hello world 1</h1>
</div>

<a onclick="toggleme('toggleText2');">Show</a>
<div id="toggleText2" class="hideme" style="display: none">
    <h1>Hello world 2</h1>
</div>