html - Cascade rows below header rows in a table -

i've created table website has rows underneath headings. there going multiple headers , want table show headers when first displayed, , display below rows when button header clicked. there way of doing this? i've been looking cascading tables have shown drop-down menus, isn't i'm looking for. (links, explanations, code) appreciated! below example of 1 of headings , of following rows in table. further clarify example, i'd want make row displaying "current location" shown , following rows (rural, suburban, metropolitan--types of locations) not visible until current location clicked or button there clicked.

<table border="1" cellpadding="5%">         <tr><th align=left>current location</th></tr>         <tr>             <td>rural</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>             </tr>         <tr>             <td>suburban</td>             <<td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>         <tr>             <td>metropolitan</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr> 

given similar html above (note i've added colspan attributes, , removed in-line, , deprecated, attributes):

<table>     <tbody class="header">         <tr>             <td colspan="4"><a href="#demo">current location</a>              </td>         </tr>     </tbody>     <tbody id="demo">         <tr>             <td>rural</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>         <tr>             <td>suburban</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>         <tr>             <td>metropolitan</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>     </tbody>     <tbody class="header">         <tr>             <td colspan="4"><a href="#demo2">another location</a>              </td>         </tr>     </tbody>     <tbody id="demo2">         <tr>             <td>rural</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>         <tr>             <td>suburban</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>         <tr>             <td>metropolitan</td>             <td>total value</td>             <td>average value</td>             <td>percentage of total</td>         </tr>     </tbody> </table> 

the following css works (tested in chromium 27):

table, td {     border: 1px solid #000; } td {     padding: 5px; } /* hides *all* 'tbody' elements: */ tbody {     display: none; } /* shows 'tbody.header' elements: */ tbody.header {     display: table-row-group; } /* shows relevant elements (in browsers support ':target'): */ tbody:target {     display: table-row-group; } 

js fiddle demo.

the above relies on tbody elements, id, being used group content , link, in header-row, linking id.

unfortunately, i'm unable think of other non-javascript alternative implement seem want; while have compatibility problems, best can think of under constraints of html tag you've specified.