Question

I have some markup like so:

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        <tr>
    </thead>  

    <tbody>
        <tr class="main">
            <td>some content</td>
            <td>some content2</td>
        <tr>
        <tr class="more">
            <td colspan="2">
                <div class="more-link"><a tabindex="0" href="#">Show more info</a></div>
                <div class="more-info">
                    more info goes here
                </div>
            </td>
        <tr>
    </tbody>
</table>

And some CSS:

td, th{
    border: 1px solid red;
}

.main td{
    height: 50px;
    width: 300px;
    vertical-align: top;
}

.main td{
 border-bottom: 0;   
}

.more td{
    border-top: 0;
    height: 0;
}

.more-link{
    position: relative;
    top: -30px;
}

.more-link:focus + div, .more-link:active + div{
    height: auto;
}

What I want to do is that when the “show more info” link is clicked, the table row called “more” expands.

The problems:

• There is no effect if I set the td inside more to have a height of 0;
• If I set height of the more-info div to 0, or display:none, the table row still takes up space.

I would like to do this with just CSS, javascript can be used to make it better, but the basics should just work without javascript.

How can I get my more row to expand when the show more info link is clicked?

And a fiddle: http://jsfiddle.net/QJr2e/

Answer 1

Got it!

Instead of using position:relative to move the “show more info” link, I gave it a float:left. This allowed me to move it anywhere I want using margin, while reorganizing the flow.

Instead of using height, I just set more-info to display:none, and then when the “show more info” link is clicked:

.more-link:active + div, .more-link:focus + div{
    display: block;
}