Hide/show table rows 1

[ItHurtsWhenIThink]

I want to hide a set of table rows and have the ability to open a set as well. I am working with a dynamic table. So the rows I want to hide or open will have the same "id". I want all the rows with the same id to close or open. The problem I have right now, is that only the first row will show up when I open the row even though there may be several rows with the same id. So in the code below list two will only show items: 1,2,3 but not item 4-12.

Code:

<script language="JavaScript">
function toggle_visibility(id) {
    var list = document.getElementsByClassName("alist");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'table-row') {
        e.style.display = 'none';
    } else {
        e.style.display = 'table-row';
    }
}
</script>

<table>
<tr>
	<td>
		<a href="#" onclick="toggle_visibility('1');"><p>List One</p></a>
	</td>
</tr>

<tr id="1" class="alist" style="display:none;">
	<td>
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </ul>
  	</td>
  </tr>

<tr>
	<td>
		<a href="#" onclick="toggle_visibility('2');"><p>List Two</p></a>
	</td>
</tr>
<tr id="2" class="alist" style="display:none;">
	<td>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
  	</td>
  </tr>
  <tr id="2" class="alist" style="display:none;">
	<td>
      <ul>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
  	</td>
  </tr>
  <tr id="2" class="alist" style="display:none;">
	<td>
      <ul>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
      </ul>
  	</td>
  </tr>
  <tr id="2" class="alist" style="display:none;">
	<td>
      <ul>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
      </ul>
  	</td>
  </tr>

</table>

 

[vacunita]

ID's must be unique. As such getElementById will only ever bring back one element: The first one it finds.

If you need to access more than one element to hide at a time you will need to use getElementsByName or ByTagName and then filter by ID.

function toggle_visibility(id) {
    var list = document.getElementsByClassName("alist");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'none';
    }
    [COLOR=#A40000]var es = document.getElementsByTagName('tr');[/color]
    [COLOR=#A40000]for(var i=0;i<=es.length-1;i++)
    {
    	var e = es[i];[/color]
    	if(e.style.display == 'table-row' && [COLOR=#A40000]e.id == id[/color]) {
        e.style.display = 'none';
    	} else if([COLOR=#A40000]e.id == id[/color]) {
        e.style.display = 'table-row';
    	}
    }
}

Also technically speaking Id's cannot be purely numeric, and cannot start with a number. They must be alphanumeric and must start with a valid letter.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ItHurtsWhenIThink]

Great tip!

Thanks, works great now.

The page I posted was just my experiment page. I actually had it working (trying) using dynamic data so the id's were actually alphanumeric values.

Now, I'll try putting it to work in my web page.

Thank you so very much!