Javascript Bootstrap 3切换更改切换按钮上的文本和图标

我目前正在Bootstrap3中构建一个网站，它有一种特殊类型的折叠/切换。我使用的是默认的引导js代码。我有一段文字和一个按钮。该按钮用于切换折叠

我试图做的是将整个块（包括段落）包装在锚链接中，无论用户单击按钮还是文本段落，锚链接都将切换折叠

我附带了一个JSFIDLE来帮助解释这个问题

到目前为止，我所做的是在html代码中添加了以下内容，当我围绕整个折叠在锚点上链接时，折叠切换应该是这样的：

<a href="#" data-toggle="collapse" data-target="#intro-text">

问题在于，包含文本和精灵图像的按钮（精灵和文本将状态从“打开”更改为“关闭”，反之亦然，取决于是否折叠），并且在使用段落触发折叠时，不会触发该按钮

我想要的是当点击段落时触发折叠时，按钮改变它的状态

---

我不确定这是css还是javascript问题（但倾向于js）。任何帮助都将不胜感激。

我认为您可以使用javascript并侦听崩溃事件，而不是使用html数据标记来解决此问题。像这样的事情应该可以做到：

JS

---

这是一个新的工作方式：

在点击段落时触发按钮操作。

$('#starting-paragraph, .collapse-btn').click( function () {
    $('#intro-text').collapse('toggle');
});

$('#intro-text').on('hidden.bs.collapse', function () {
  $('.collapse-btn').addClass("collapsed");
});

$('#intro-text').on('shown.bs.collapse', function () {
  $('.collapse-btn').removeClass("collapsed");
});