CODEWITHSUNDEEP
javascript
Steph3071
Steph3071

Reputation: 321

Adding a table stops js show/hide from working

I have a show/hide function on a web page where I want to improve the layout, but when I added a new table to put in headers for the data, the show/hide stopped working.

A snippet of the original code is:

<table id="cart-list">
  <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
    <tr class="cl-group">
      <td class="cl-sh" title="Show [+] or Hide [-] this lists' products">&nbsp;</td>
      <td colspan="2">Cart List One:
        <table id="cl-chg-1" class="cl-other cl-chg">
          <tr>
            <td>List Name:</td>
            <td><input type="text" name="group_name[1]" value="Cart List One" maxlength="255" /></td>
          </tr>
          <tr>
            <td>List Comments:</td>
            <td><input type="text" name="group_comments[1]" maxlength="255" /></td>
          </tr>
          <tr>
            <td><button type="button" onclick="cancelGroupEdit();">Cancel</button></td>
            <td><button type="submit" name="change" value="1">Go</button></td>
          </tr>
        </table>
      </td>
    </tr>
  </div>
  <tr>
    <td>Stuff Here</td>
  </tr>
  <tr>
    <td>Stuff Here</td>
  </tr>
</table>

And the js used is

var groups = document.getElementsByClassName("cl-sh");
if (groups) {
  for (var i = 0; i < groups.length; i++) {
    groups[i].onclick = function() {
      this.classList.toggle('cl-a');
      var productsDisplay = '';
      if (this.classList.contains('cl-a')) {
        productsDisplay = 'none';
      }

      var nextRow = this.parentNode.nextElementSibling;
      while (nextRow) {
        if (nextRow.classList.contains('cl-group')) {
          break;
        }
        nextRow.style.display = productsDisplay;
        nextRow = nextRow.nextElementSibling;
      }
    }
  }
}

A fiddle can be seen here: https://jsfiddle.net/65j1nvpq/1/

The broken function with the additional table code added can be seen here: https://jsfiddle.net/cmgqeLf7/

I don't really understand why having an additional table is breaking the function.

Any suggestions on a fix for this?

Upvotes: 0

Views: 42

Answers (1)

Luke Woodward
Luke Woodward

Reputation: 64969

What does your JS function do when you click on the +/- cell?

Firstly, it toggles whether the clicked cell contains the cl-a class. Then, it runs through all remaining rows in the same table, showing or hiding them as appropriate, until it finds a row with the class cl-group, or hits the end of the rows in that table.

Note the word same in the last paragraph.

In your first fiddle, you have one table. In your second fiddle, you have two, and the rows you wish to toggle the display of are not in the same table as the toggle button. This is why they are not showing/hiding when you click the toggle button.

I'm not sure exactly what your requirements for showing/hiding rows are, so I'm not going to propose a fix. However, understanding what the problem is may help you to find a fix for yourself.

Upvotes: 1

Related Questions