只使用html/css的多个可折叠列表

所以我试图创建一些你可以点击的东西，它会展开一个列表，再次点击，它就会崩溃。我想在没有jquery/javascript的情况下实现这一点。我在这里找到的代码正好满足了我的需要，但有一个问题，就是有多个不同的扩展列表。当添加第二个列表时，单击第一个列表将导致两个列表都打开，但仅单击第二个列表将只会自行展开/折叠（所需结果）。有没有办法在不添加大量CSS的情况下实现这一点

[id^=“togList”]~.list，
/*隐藏列表*/
[id^=“togList”]+标签span+span，
/*隐藏“崩溃”*/
[id^=“togList”]：选中+标签范围{
/*隐藏“展开”（如果选中）*/
显示：无；
}
[id^=“togList”]：选中+标记span+span{
显示：内联块；
/*显示“折叠”（如果选中）*/
}
[id^=“togList”]：选中。列表{
显示：块；
/*显示列表（如果选中）*/
}

˅
˄
不管是什么，穆托

˅
˄
麻木2

这将对选中复选框后的每个

列表
应用
display:block

对于纯CSS选项卡，我建议查看这篇文章

如果你真的喜欢你的例子，那么你只需要包装每一组。参见我的示例：


[id^=“togList”]~.list，
/*隐藏列表*/
[id^=“togList”]+标签span+span，
/*隐藏“崩溃”*/
[id^=“togList”]：选中+标签范围{
/*隐藏“展开”（如果选中）*/
显示：无；
}
[id^=“togList”]：选中+标记span+span{
显示：内联块；
/*显示“折叠”（如果选中）*/
}
[id^=“togList”]：选中。列表{
显示：块；
/*显示列表（如果选中）*/
}

˅
˄
不管是什么，穆托

˅
˄
麻木2

这几天来，我一直在努力用几种不同的方法来实现这一点，非常感谢！
[id^="togList"]:checked ~ .list