Adding a transition to text expanding/collapsing using CSS

Question

I would like to add a smooth transition when I click a line of text, all I get is an instant expand. I would also like Line 1 to retract when I click Line 2, as it is now, the lines stay expanded if I click the next/previous one. I'd prefer to use CSS or HTML if possible.

I tried fiddling around with transition and here's the current line not working, at all...

div:focus{
    transition: all 5s ease;
}

I'm stuck... Any help is appreciated. Thanks in advance.

Here's a jsfiddle: http://jsfiddle.net/jnsk3f2g/3/

Because I have zero knowledge in js, and I'm using a wordpress based site. so I'm not sure where to add it and whatnot.. — Advokaten, Oct 19 '15 at 22:03

score 1 · Answer 1 · answered Oct 19 '15 at 22:31

1

The best way to do this is with JavaScript. Though there is a possible solution with CSS, by transitioning the maximum height of the collapsible content. See this fiddle.

.toggle-text + label + div {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.toggle-text:checked + label + div {
  max-height: 100px;
}

div {
    transition: max-height 0.4s ease;
}

It's not as reliable as a JS solution though as it requires a hard number, the max height.

answered Oct 19 '15 at 22:31

Will

18,657
7
46
48

Problem is that I have zero knowledge in JS so at the moment CSS is what I'd like to learn fully before jumping into JS... Transition works just as I wanted. Thank yuo so much for taking your time to make this. Upvoting. :) – Advokaten Oct 20 '15 at 12:50

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

I've altered your Fiddle so that it always only lets one line be expanded, and added the transition. The height of the line that is being revealed is fixed, though. Like Will said in his answer, you can also alter the max-height, instead of the fixed height I have given these elements, so that it is more dynamic.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 19 '15 at 22:35

Gust van de Wal

5,052
1
20
45

This is exactly what I was looking for. Thank you so very much for this man. I'm glad the world has people like you guys! :) Upvoting you. – Advokaten Oct 20 '15 at 12:51

Adding a transition to text expanding/collapsing using CSS

2 Answers2