asked on

CSS with Tables to Hide Table Rows

I have not done any CSS or javascript programming, so please answer for a noob..
I want a basic description of how to use CSS to expand/colapse a table row.

The least amount of javascript the better and I'm after a script that is simple enough to avoid issues with future releases of IE & Firefox browsers (if this is possible).

If I can seperate out the code from the table & into the header that would mean that I can reuse the code for multiple tables - this would be good.

For example, I want a visitor to be able to click on the 1st table row ("My Title") and have it hide (moving any content below it up) the 2nd table row. I would like to be able to click anywhere in the table row, not just on the text, unless this will overly complicate the code:

<table>
<tr>
<td>My Title</td>
</tr>
<tr>
<td>Content<p>Content<p>Content</td>
</tr>
</table>

So as far as the user is concerned, after they click on the 1st table row the 1st time it will hide the 2nd row, when they click on the 1st table row again it will show the 2nd table row. I'd like to have the full table showing to start with when the page loads.

[Optional] Is it much harder if there are 3 or more rows all up & clicking on the 1st row will hide the 2nd 2 or more rows? [Optional - this is not required to answer the question]

Thanks

basicinstinct

all javascript solution here:

<html>
<head>
<script type="text/javascript">
      function clickify(tblIndex)
      {
            //pass 0 as tblIndex for first table, 1 for second table and so on
            var tbl = document.getElementsByTagName('table')[tblIndex];
            var headerRow = tbl.rows[0];
            headerRow.onclick=new Function('showhide(this);');
      }

      function showhide(tRow)
      {
            var sib = tRow.nextSibling;
            while(sib != null)
            {
                  if(sib.nodeType == 1 && sib.tagName.toLowerCase() == 'tr')
                  sib.style.display = (sib.style.display == 'none')?'':'none';
                  sib = sib.nextSibling;
            }
      }
      window.onload = new Function('clickify(0)');
</script>
</head>
<body>
<table>
<tr>
<td>My Title</td>
</tr>
<tr>
<td>Content<p>Content<p>Content</td>
</tr>
</table>
</body>
</html>

gamm

ASKER

Thanks.
I noticed, though, if I have more than 1 table it won't work.
Also, if I have to ID each table I want to collapse then this would be a problem for my pages that pick up data from a database, as the content of the page may or may not have tables in it, which would throw out the table index number for any tables after the content...

Here's a more detailed example:

<html>
<head></head>
<body>

<table>
<tr>
<td width="200">My Left Col</td>
<td width="500">My data from a database. May contain tables.</td>
<td width="165">

This is some text.<p>
<table width="150">
<tr>
<td bgcolor="#cccccc">My Title</td>
</tr>
<tr>
<td>Content<p>Content<p>Content</td>
</tr>
<tr>
<td>2<p>2<p>2</td>
</tr>
</table>
This is some text.<p>
This is some text.<p>
<table width="150">
<tr>
<td bgcolor="#cccccc">My Title</td>
</tr>
<tr>
<td>Content<p>Content<p>Content</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

Thanks

gamm

ASKER

I don't mind having css/javascript in the actual tables (for example, to pass some form of ID etc to the main code), I just would prefer the main component of reusable code in the header for that purpose.

Thanks

SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gamm

ASKER

I could see this working for static pages.
It doesn't work for me, as it only collapses the first specified tables.
I need a way to ID each table as being collapsable or not so it won't matter how many tables there are before the table(s) to be colapsed.

This is a problem given that the content is pulled out of a database there could be any number of tables in the content.

gamm

ASKER

ok, I took a while to write the last comment, so I hadn't looked at the post just before it... I will try that one & get back to you..
Thanks.

gamm

ASKER

ok, that last post worked - thanks.
I thought there would be a simpler way of doing this through CSS? maybe i'm just naive on the topic...
If not then my question has been answered, but I will leave it open a little longer to see if I get any CSS comments.

Many thanks.

Michel Plungjan

You can use css to change things with the hover (mouseover) directly
To do a click, you will need to do something with the hash and make the title a link
Otherwise there is nothing in CSS that can detect you are toggling.

The javascript you have now is very simple an flexible - it will not do anything if you do not have tables or if no tables are collapsible.

Michel
PS: If you do decide to accept this solution, please be sure to split points
Thanks

basicinstinct

thanks mplungjan