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
LVL 4
gammAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
You can change the code to make it easier to select the tables

Now a table with a class of collapsable will collaps

Please note that the main code was from BasicInstinct

<html>
<head>
<script type="text/javascript">
      function clickify(tbl)
      {
            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 = function() {
        var tables = document.getElementsByTagName('table');
          for (var i=0;i<tables.length;i++) {
            if (tables[i].className.indexOf('collapsable')!=-1) {
                clickify(tables[i])
            }
          }
        }
</script>
</head>
<body>
<table border="1">
  <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 border="1" width="150" class="collapsable">
        <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 border="1" width="150" class="collapsable">
        <tr>
          <td bgcolor="#cccccc">My Title</td>
        </tr>
        <tr>
          <td>Content<p>Content<p>Content</td>
        </tr>
      </table>


    </td>
  </tr>
</table>
</body>
</html>
0
 
basicinstinctCommented:
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>
0
 
gammAuthor Commented:
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
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
gammAuthor Commented:
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
0
 
Michel PlungjanIT ExpertCommented:
Yes it worked

You just needed to set them both to be collapsable using : window.onload = function() {clickify(1);clickify(2) };

<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 = function() {clickify(1);clickify(2) };
</script>
</head>
<body>
<table border="1">
  <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 border="1" 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 border="1" 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>
0
 
gammAuthor Commented:
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.
0
 
gammAuthor Commented:
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.
0
 
gammAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
basicinstinctCommented:
thanks mplungjan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.