Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

expandable tables that are closed by default (before onload)

Status
Not open for further replies.

impeachme

Technical User
Apr 13, 2012
1
US
Hello,

I have multiple tables/rows whose visibilities I would like toggled by text elsewhere in the page, but would also like these tables/rows to be collapsed by default before the page loads entirely (even if users without javascript won't be able to see the table contents). Also, how may I make a separate link to expand a specific table regardless of its visibility? In the example below, I would like rowA and rowB to be toggled by their headers, and the first two links of the page linking to headers and expanding the row below regardless of the rows current visibility.

Any help would be appreciated. Thanks!

Dan

Code:
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#headA">goto and expand A</a><br />
<a href="#headB">goto and expand B</a><br /><br />
<table>
  <thead>
  <tr>
    <td><a name="headA" id="headA"></a>toggle rowA</td>
  </tr>
  </thead>
  <tr id="rowA">
    <td>rowA</td>
  </tr>
</table><br /><br />
<table>
  <thead>
  <tr>
    <td><a name="headB" id="headB"></a>toggle rowB</td>
  </tr>
  </thead>
  <tr id="rowB">
    <td>rowB</td>
  </tr>
</table>
</body>
</html>
 
How are you collapsing them now?

If its a simple matter changing their visibility you can:

Code:
<a href="#headA" onclick="document.getElementById('rowA').visibilty=visible;">goto and expand A</a><br />

And to make them invisible on load, simply use CSS to set their visibility.
CSS:
#rowA{
visibility: hidden;
}


----------------------------------
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top