Javascript 带锚定按钮的多束手风琴效果

我正在一个网站上工作，我需要导航栏，或者我可以使用锚按钮来显示我的内容，在这里，我在加载时显示内容时遇到问题。第一次单击任何按钮时，所有展开的项目都会折叠，第二次单击时，它将按照我在代码java脚本中给出的说明进行操作

以下是我所做的：

$（'#按钮-1'）。单击（函数（e）{
$（#collapseOne'）。collapseOne（'show'）；
$（“#collapseTwo”）.collapse（'show'））
$（“#collapseThree”）.collapse（'show'）；
$（“#collapsefour”）.collapse（'show'）
});
$（“#按钮-2”）。单击（函数（e）{
$（“#collapseOne”）.collapse（'hide'）；
$（“#collapseTwo”）.collapse（'show'））
$（“#collapseThree”）.collapse（'show'）；
$（“#collapsefour”）.collapse（'show'）
});
$（“#按钮-3”）。单击（功能（e）{
$（“#collapseOne”）.collapse（'hide'）；
$（'#collapseTwo'）。折叠（'隐藏'）
$（“#collapseThree”）.collapse（'show'）；
$（“#collapsefour”）.collapse（'show'）
});
$（“#按钮-4”）。单击（函数（e）{
$（“#collapseOne”）.collapse（'hide'）；
$（'#collapseTwo'）。折叠（'隐藏'）
$（“#collapseThree”）.collapse（'hide'）；
$（“#collapsefour”）.collapse（'show'）
});

测试
测试-1测试-1测试-1
测试2测试2测试2测试2测试2
测试-3测试-3测试-3
使用
show（）
和
hide（）


$（'#按钮-1'）。单击（函数（e）{
$（#collapseOne'）。显示（“正常”）；
$（#collapseTwo'）。显示（“正常”）；
$（#collapseThree'）。显示（“正常”）；
$（#collapsefour'）。显示（“正常”）；
});
$（“#按钮-2”）。单击（函数（e）{
$（'#collapseOne'）。隐藏（“正常”）；
$（#collapseTwo'）。显示（“正常”）；
$（#collapseThree'）。显示（“正常”）；
$（#collapsefour'）。显示（“正常”）；
});
$（“#按钮-3”）。单击（功能（e）{
$（'#collapseOne'）。隐藏（“正常”）；
$（'#collapseTwo'）。隐藏（“正常”）；
$（#collapseThree'）。显示（“正常”）；
$（#collapsefour'）。显示（“正常”）；
});
$（“#按钮-4”）。单击（函数（e）{
$（'#collapseOne'）。隐藏（“正常”）；
$（'#collapseTwo'）。隐藏（“正常”）；
$（'#collapseThree'）。隐藏（“正常”）；
$（#collapsefour'）。显示（“正常”）；
});

测试
测试-1测试-1测试-1
测试2测试2测试2测试2测试2
测试-3测试-3测试-3
是否要在页面加载中显示内容？或者你只想在点击按钮时显示内容？那么你想这样做吗：内容不应该在加载时显示，然后在你点击某个按钮后，你想以那种特定的方式显示内容？我想在页面加载时显示所有内容，这将给用户带来两种体验，如果他们向下滚动，他们可以看到所有内容，甚至可以通过单击按钮。感谢您的帮助。即使我尝试了快速，慢速的java脚本，它也可以帮助我设计好。