html - 使用CSS向文本扩展/折叠添加过渡

Question

当我单击一行文本时，我想添加一个平滑过渡，我得到的只是即时扩展。我也希望单击第2行时缩回第1行，因为现在是这样，如果单击下一个/上一个，则行会保持展开状态。如果可能，我宁愿使用CSS或HTML。

我尝试摆弄过渡，这是当前行根本不起作用...

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

我被卡住了。提前致谢。

这是一个jsfiddle：
http://jsfiddle.net/jnsk3f2g/3/

Answer 1

我已经更改了您的Fiddle，使其始终只允许扩展一行，并添加了过渡。但是，显示的行的高度是固定的。就像Will在his answer中所说的那样，您也可以更改max-height，而不是我已经给这些元素的固定的height，从而使它更具动态性。