当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Adding a transition to text expanding/collapsing using CSS

问题描述:

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/

网友答案:

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.

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: