带有显示/隐藏按钮的 Twitter Bootstrap 3 手风琴答案

【问题标题】：Twitter Bootstrap 3 accordion with show / hide button带有显示/隐藏按钮的 Twitter Bootstrap 3 手风琴
【发布时间】：2014-02-28 23:49:38
【问题描述】：

我正在使用 twitter bootstrap 3 和手风琴模块，我想要执行以下操作：一个显示“显示”的按钮，当它显示时，一个显示“折叠”的按钮。

我尝试过使用数据属性，但没有成功。

手风琴在 django 的循环中。

谢谢

我正在使用这个js

$('a.accordion-toggle').click(function() {
    if ( $(this).next('.accordion-body').hasClass('in') ) {
        $(this).text('Close');
    } else {
        $(this).text('Open');
    }
});

我设法让它工作，但它只切换一次按钮：全部折叠，按钮“打开”。如图所示，按钮“关闭”。但如果我隐藏手风琴，按钮不会再次变为“打开”。

【问题讨论】：

标签： twitter-bootstrap-3 accordion

【解决方案1】：

您只需使用 CSS 即可。我使用了“文件夹打开”和“文件夹关闭”字形图标。这是 Bootstrap 示例，我刚刚将 collapse 类添加到封闭的标题锚点中。

这是一个例子： http://jsfiddle.net/rTw7D/7/

【讨论】：