CODEWITHSUNDEEP
htmlcss
user2133606
user2133606

Reputation: 347

Is it possible to expand and collapse table rows/data with only css?

I have small generic table which looks something like this:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

I want to be able to click on each table data to expand additional information. Can I do this using only css or do I have to resort to javascript?

Upvotes: 1

Views: 5997

Answers (2)

boortmans
boortmans

Reputation: 1160

I don't think you can achieve this with css.
But with jQuery's slideToggle(), it's a piece of cake!

Upvotes: 2

ScottS
ScottS

Reputation: 72261

You probably will want javascript (and definitely will if you intend the item to stay open after being clicked). But to demonstrate there are instances where it can be done purely with CSS, this will work in CSS3 browsers (only while holding down the mouse button).

See the fiddle.

HTML

<table>
<tr>
    <td>1<div>More info on 1</div></td>
    <td>2<div>More info on 2</div></td>
</tr>
<tr>
    <td>1<div>More info on 1</div></td>
    <td>2<div>More info on 2</div></td>
</tr>
</table>

CSS

td {
    vertical-align: top;
}
td > div {
    height: 0;
    overflow: hidden;
}

td:active > div {
    height: auto;
}

Upvotes: 2

Related Questions