We help IT Professionals succeed at work.

CSS with Tables to Hide Table Rows

946 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
Comment
Watch Question

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>

Author

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

Author

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
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

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.

Author

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.

Author

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.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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
thanks mplungjan

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.