Javascript 引导折叠部分并用一个按钮展开另一个部分

我有一组逻辑上分开的HTML字段：一半字段位于：div id=“general”中，另一半位于：div id=“advanced”

我试图实现（但失败）的是以下内容：

要显示的常规div中的字段（默认情况下）。显示标题为“高级”的按钮。以及要隐藏的高级div中的字段

单击此按钮时，应出现以下情况：

“常规”部分折叠，隐藏其所有字段

高级部分展开，显示其所有字段

按钮标题更改为“常规”

随后的单击将切换上述选项

例如，下一次单击时，高级部分现在隐藏，常规部分现在显示，按钮标题更改为“高级”

注意：这看起来很琐碎，但作为web前端的新手，我不容易理解。如果我的div部分不正确，则将其废弃。我想我的思路是对的，只需要一些jQuery代码来折叠和扩展div

以下是我的尝试：

我使用了带有accordian标记的引导折叠插件，但这不是我想要的。虽然很接近，但每个部分都有一个标题/按钮。我想要一个标题/按钮以相反的方式切换每个部分

我使用了没有手风琴标记的引导折叠插件，但结果与再次尝试1-2按钮相同

我尝试使用jQuery动态地执行此操作，但无法获得正确的逻辑（或语法）

---

我使用的是Bootstrap，但如果不能通过使用collapse插件在Bootstrap中单独完成，我很乐意使用jQuery（或JavaScript）解决方案。

您可以使用jQuery通过切换元素上的类来完成，该元素决定要显示哪些字段

例如，取一个外部

div

，将general和advanced

div

放在外部

div

中，并使用css仅显示基于外部div类的字段，如

advanced

。并绑定一个按钮以切换外部div上的类

在此处签出JSIDLE:

检查JSIDLE:-

$("#advanced").addClass('hide');
  $(".button").click(function(){
  $("#advanced").toggleClass('hide');
  $("#general").toggleClass('hide');
  if($(this).attr("value") == "Advanced"){
    $(this).attr("value","General");
  }
 else if($(this).attr("value") == "General"){
    $(this).attr("value","Advanced");
 }
});