Pure CSS HTML Table Cell Expand/Collapse On Click

Question

I am admittedly not at all good with CSS. I know there are similar questions and examples out there, but I haven't been able to make anything work with my example, despite plenty of trying. Your assistance is greatly appreciated.

Please take a look at this fiddle: http://jsfiddle.net/4h75G/2/

If you hover over the "Data1,1" cell in the bottom table, it automatically expands to show the entire cell contents. However, what I would like to be able to do rather than have it expand on hover is instead be able to click one time to expand the cell, and then click a second time to contract/collapse it back to its original state. I would like to do this with only CSS and no Javascript.

Thanks!

HTML:

        <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td>Data1,1</td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>
    </br>
    <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
    <br/>Data1,1 second line - this is a kind-of long line too
    <br/>Data1,1 third line
    <br/>Data1,1 fourth line</span>
    </div>
    </td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>

CSS:

    body,table{
        font-family:verdana,arial,sans-serif;
        font-size:12px;
        border-collapse:collapse;
    }

    td,th{
        padding:3px 3px;
        margin:0px;
        border:1px solid #BBB;
        white-space:nowrap;
    }

    .content{
        height:15px;
        width:100px;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .content:hover{
        height:auto;
        width:auto;
    }

Answer 1

You might achieve something like that without script by fiddling with hidden css-elements that can keep state (such as a checkbox), but I think you are much better off doing this by simply toggling a class in script.

If you wrap you .content in a label, prepend a checkbox and hide it like this:

input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}

You can achieve what you want, but it is damn ugly. See http://jsfiddle.net/4h75G/13/ for an example of this dubious practice applied to your example.