使用CSS / Jquery为隐藏的元素创建平滑过渡

Question

我正在尝试创建一个列表，该列表在您单击时会扩展，并使用transition 1s all使之平滑。但是，列表中有隐藏的部分，我想在用户单击该项目时对其进行扩展。但是我无法使其平滑扩展，似乎只是将其打开/关闭。

See the JSFiddle for the code.

有人可以帮忙吗？

编辑：我希望它切换高度（非常类似于BootStrap的collapse类）。请勿切换display属性。

如果您不愿意看代码 Praveen ，您会发现的。