Bootstrap 3 Toggle Changing button text and icon on toggle

Question

I'm currently building a website in bootstrap 3 that has a particular type of collapse/toggle. I'm using the default bootstrap js code. I have a text paragraph and a button. The button is used to toggle the collapse.

What I'm trying to do is wrap the whole block (including the paragraph) in a anchor link that will toggle the collapse whether the user clicks the button OR the paragraph of text.

I've attached a jsfiddle of the current code I have in a jfiddle to help explain the problem.

What I've done so far, is I've added the following to the html code and the collapse toggles as it should when I link on the anchor around the whole collapse:

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

the issue is that the button which contains text and a sprite image (which the sprite and the text changes state from "OPEN" to "CLOSE" and vice-versa depending whether it is collapsed or not) and this is not triggered when the paragraph is used to trigger the collapse.

What I want is the button to change it's state when the collapse is triggered when the paragraph is clicked.

I'm not sure whether this is a css or javascript issue (but leaning towards js). Any Help would be greatly appreciated.

Answer 1

I think you can use javascript and listen for the collapse events rather than using the html data tags to resolve this issue. Something like this should do the trick:

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

Here's a new fiddle with it working: http://jsfiddle.net/o0pLgy6c/