Bootstrap 折叠部分并一键展开另一部分答案

【问题标题】：Bootstrap collapse section and expand another with one buttonBootstrap 折叠部分并一键展开另一部分
【发布时间】：2015-01-01 05:48:15
【问题描述】：

我有一堆在逻辑上分开的 HTML 字段：一半的字段位于：div id="general"，另一半位于：div id="advanced"

我正在尝试实施（但失败）的内容如下：

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

单击此按钮时，应发生以下情况：

常规部分折叠并隐藏所有字段
高级部分展开显示所有字段
按钮标题更改为“常规”。

后续点击会切换上述内容。

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

注意：这似乎微不足道，但对于 Web 前端来说是新手，我不能轻易做到这一点。如果我的 div 部分不正确，则将其废弃。我怀疑我走在正确的轨道上，只需要一些 jQuery 代码来折叠和展开 div。

以下是我的尝试：

我使用了带有 accordian 标记的 Bootstrap 折叠插件，但这不是我想要的。虽然它很接近，但每个部分都有一个标题/按钮。我想要一个标题/按钮以相反的方式切换每个部分。
我使用了没有手风琴标记的 Bootstrap 折叠插件，但结果与尝试 1 相同 - 再次使用两个按钮。
我尝试使用 jQuery 动态执行此操作，但无法正确获取逻辑（或语法）。

我正在使用 Bootstrap，但如果不能单独在 Bootstrap 中使用折叠插件来完成，我很乐意使用 jQuery（或 JavaScript）解决方案。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用 jquery 通过切换元素上的类来确定要显示哪些字段。

例如取一个外部div，将通用和高级div 放在外部div 中，并仅显示基于外部div 类的字段，例如使用css 的advanced。并绑定一个按钮来切换外部 div 上的类。

在这里结帐 JSFiddle：http://jsfiddle.net/eqhw2mxx/2/

【讨论】：

【解决方案2】：

检查 JSFiddle :- JSFiddle

$("#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");
 }
});

【讨论】：