Collapsing Table With Html

I have a table that I want to show used, available, and total for storage for specific servers. However, the servers have multiple drives and I want the default view to show totals

Solution 1:

Use JQuery so your new Jsfiddle(updated) : http://jsfiddle.net/5BRsy/3/

First set class and ids so you can call them with JS Note I had to do it for every TD because it wouldn't let me use div or span and hide them.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table2">
 <th></th><th>server 1</th><th>server 2</th>
 <tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
 <tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>

 <tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

then use JS

    $(document).ready(function(){
  $(".btn").click(function(){
    $(".expand1").toggle();
  });
      $(".btn2").click(function(){
    $(".expand2").toggle();
  });
})

And CSS to hide them onload else they could see the hidden TDs

.expand1 { display: none;
}

.expand2 { display: none;
}

For more info visit http://www.w3schools.com/jquery/jquery_hide_show.asp

Solution 2:

A javascript function would be great for this. Just add classes to the rows that have drive 1/2 and ID's for each server and then you could do a .show and .hide if rows are clicked.

Solution 3:

There are a few options. You can use this small jQuery plug-in: http://sylvain-hamel.github.io/simple-expand/

Or you can make use of Accordion from jQuery http://jqueryui.com/accordion/