Javascript 幻灯片/切换菜单的脚本？

不知道问这类问题是否可以，如果可以，那么就删除它

但我目前正在寻找某种滑动/切换菜单。我一直在谷歌上搜索，但老实说，我似乎找不到任何东西。 我更喜欢HTML/CSS，所以我不能自己编写代码，因为我是jQuery或其他什么。这就是为什么我在寻找某种我可以使用的脚本

我附上了一张图片，显示了我想要它做什么

在左边，你会看到右上角有一个小框，当我点击它时，我希望它向下展开并保持这样，直到我再次点击按钮。如果有一个向上/向下的箭头根据状态的不同而变化，那也不会有什么坏处

所以，任何能够指向脚本的人都可以做到这一点吗？：）

---

提前谢谢。

也许是这样的

HTML:

---

JSFIDLE live demo:

请输入您的代码…您的意思是希望在HTML/JS/CSS（可能在网页上）中执行此操作吗？@EmilLundberg是的。。。我没有密码。我只是想知道是否有人能给我指一个我可以使用的脚本。如果你在基于web的用户界面上做了很多工作，我建议你学习一些JavaScript和jQuery。虽然我更喜欢尽可能少地使用JavaScript，但它可以让您添加一些额外的香料，比如动画等等。正如您在我下面的回答中所看到的，使用jQuery，您真的不需要很多JavaScript来做这样的小事。

<div id="header">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Boo</li>
        <li>Far</li>
    </ul>
    <div id="toggledWrapper">
        <p id="toggled">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="toggler">Toggle</div>
    </div>
</div>

$(document).ready(function() {
    $("#toggled").hide();

    $("#toggler").click(function () {
        $("#toggled").slideToggle();
    });
});