Html 从另一个元素单击事件时的CSS转换

对不起，这个标题没有什么意义。我所拥有的是一个“问题或评论”的范围，我希望它能做的是当你点击它时，下面会出现一个表单（在转换中）。我已经试着在这个网站上寻找类似的问题，但没有一个能够为我正在尝试做的工作。目前，我使用javascript在单击span时为表单提供

display:block

属性。如果可能的话，我想使用CSS。如果不可能，那么我将接受javasacript。有什么帮助吗？
这是我的代码：

HTML:

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

---

“显示”不是可设置动画的属性。尝试更改窗体高度或不透明度。例如：

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

---

然后使用JavaScript切换类。

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

visibility:[hidden/show]    

---

我认为没有javascript调用是不可能的——下面是一个利用jQuery的例子

ryans方法有效-但请注意，可能会有一些感谢。。。但我要求一个过渡。如果你能把它添加到你的js提琴中，那就太棒了，“隐藏和显示一个div的属性不是display，而是visibility”——这不是真的；两者都可用于“隐藏”元素，但对布局的效果不同。

visibility:[hidden/show]