我的目标是创建一个如图所示的切换箭头。“关闭”状态包括一行文本，旁边有一个图标，以及触发切换的箭头。“打开”状态包括一些文本行和一张图片（与屏幕截图中显示的略有不同，但我真正纠结的只是动画部分）。
我正在使用 HTML5 Up 中的模板，其中在菜单栏中包含类似的切换，因此我尝试复制相应的 HTML 和 CSS 代码，但这些代码不起作用。没有错误消息，并且切换没有出现在网站上（参见下面的 CSS 片段）。
<span class="opener">Text that appears next to toggle arrow</span>
有没有办法用 HTML 和 CSS 来做到这一点，还是需要 Javascript？
<span class="opener">Text that appears next to toggle arrow</span>