[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS with Tables to Hide Table Rows

Posted on 2007-09-27
10
Medium Priority
?
727 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:gamm
  • 5
  • 3
  • 2
10 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 19976675
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
 
LVL 4

Author Comment

by:gamm
ID: 19976708
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
 
LVL 4

Author Comment

by:gamm
ID: 19976746
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 2000 total points
ID: 19976793
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 19976812
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
 
LVL 4

Author Comment

by:gamm
ID: 19976867
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
 
LVL 4

Author Comment

by:gamm
ID: 19976883
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
 
LVL 4

Author Comment

by:gamm
ID: 19976924
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19976955
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
 
LVL 23

Expert Comment

by:basicinstinct
ID: 19977022
thanks mplungjan
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question