来自另一个元素的click事件的CSS转换

Question

很抱歉这个标题没有意义。我所拥有的是“问题或评论”范围，我想要它做的是当你点击它时，一个表格出现在下面（转换中）。我已经尝试在这个网站上查看类似的问题，但没有一个能够为我想做的事情工作。目前，当点击跨度时，我有javascript为表单提供display:block属性。我想尽可能使用CSS。如果不可能那么我会接受javasacript。有什么帮助吗？ 这是我的代码：

HTML：

<span id="comment">Questions or Comments</span>
<form action="" method="post">
<textarea></textarea>
<input type="submit" id="submit" />
</form>

和CSS：

#comment {
text-decoration:underline;
}

form {
display:none;
}

Answer 1

显示不是可动画的属性。尝试更改表单高度或不透明度。例如：

form {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
form.hidden {
    opacity: 0;
}

然后只使用JavaScript来切换课程。

Answer 2

隐藏和显示div的属性不显示，而是

visibility:[hidden/show]    

我不相信没有javascript调用就可能 - 这是一个使用jQuery的example。