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;
    }

Solution

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.

Comments

[dizzy.stackoverflow]

Even though in my question I stated that I would like to do this in pure CSS, I would still be interested in seeing how it's done with Javascript, so I thank you for providing this example. However, unfortunately it does not work in either Firefox or Chrome. :(

[dizzy.stackoverflow]

Awesome! What about this is dubious? Hiding the checkbox? Or just the entire concept is bad? Do you think this will be problematic in any browsers or email client HTML rendering engines?

[tobi]

Just change .content:hover in your CSS to .active :)

[tobi]

It is an abuse of the concepts at least:) It is better to do behaviour in the script, keep the presentation in CSS (also, older IE‘s won‘t read the :checked pseudo-selector) and keep the markup free of all elements that does not pertain to structure/content. If you toggle a class name like active or expanded on the content you want to show, you get a much more intuitive separation.

[dizzy.stackoverflow]

Thanks :) That's slightly closer but still has issues: jsfiddle.net/4h75G/28

[dizzy.stackoverflow]

Yes! I'm sorry I didn't catch that. Of course that makes sense and does work. Thanks!

[Alejandro Galera]

Can you provide a solution for considering the checkbox is the whole row, not just a cell, please? I've been trying