Twitter bootstrap 推特引导折叠-图标带有：after

我正在使用：after来设置标题图标，在我想在它们之间切换之前，一切都是不言自明的。 我做了这把小提琴：

因为stackoverflow希望我这样做，而且因为这是唯一的自定义代码：

.accordion-toggle:after {
    content: 'ON';
}
.accordion-toggle.collapsed:after {
    content: 'OFF';
}

当你点击其中一个，然后当它打开时，你可以看到另一个问题。通过点击另一个手风琴。在：之后不会改变，这意味着图标不会改变，如果我有他们那里

最好的方法是什么？在使用：before/：after时，我还没有看到这样的问题，所以我正在寻找一种尽可能优雅的解决方案

---

E:我使用的是Bootstrap v2.3.2

它没有什么特别之处，我只是这样做了：

$('.accordion-toggle').on('click', function(){
    $('.accordion-toggle').not(this).addClass('collapsed');
});

不确定为什么默认情况下不会发生这种情况：-(