Change text in a bootstrap collapse button based on whether the element is collapsed

Question

I've had a look at a few threads on here about this but I am having issues ammending the code to fit my design.

I am using Collapse buttons from here: http://getbootstrap.com/javascript/#collapse

They work fine but I would like the text and icon to change based on the state of the element.

Minimised: Show More V Expanded: Show Less ^

I wrote it in 2 scripts because I am quite the gumby with JavaScript:

<Script>
$(".collapse").click(function(){
  $(this).hasClass("in")?true : (function(){
      $(this).children("i").removeClass('fa-caret-down');
      $(this).children("i").addClass('fa-caret-up');
  }, function () {
      $(this).children("i").removeClass('fa-caret-up');
      $(this).children("i").addClass('fa-caret-down');
  });
});
</script>

<Script>
$(".collapse").click(function(){
  $(this).hasClass("in")?true : (function(){
      $(this).children("i").removeClass('More');
      $(this).children("i").addClass('Less');
  }, function () {
      $(this).children("i").removeClass('Less');
      $(this).children("i").addClass('More');
  });
});
</script>

The names of the elements are all things like collapseBech, collapseTrev etc.

Is this something obvious I am missing?

The HTML

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseBech">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseBech" aria-expanded="false" aria-controls="collapseBech">
    Read More <i class="fa fa-caret-down"></i>
</a>

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseTrev">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseTrev" aria-expanded="false" aria-controls="collapseTrev">
    Read More <i class="fa fa-caret-down"></i>
</a>

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseNat">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseNat" aria-expanded="false" aria-controls="collapseNat">
    Read More <i class="fa fa-caret-down"></i>
</a>

Answer 1

The way you are using the ternary operator is not correct, you are doing:

[condition]?true : [code_if_true] , [code_if_false];

but the right syntax is:

[condition]?  [code_if_true] : [code_if_false];

note that you don't use the keyword "true" and the colon ( : ) separates the two code blocks, not a comma as in your code.

However, your code is quite long so the ternary operator is not a good idea, you should use a simple if-else such as:

EDIT:

I have changed the code below after seeing your HTML code in your last edit. The problem is that you are triggering the event when someone clicks on the element with class collapse , but that's wrong because you click on the button not on the .collapse element:

$(".collapse").click(function(){}); // This is wrong

you need to assign a class, let's call it clickable-butn , to each of the buttons, so that later we can apply the .click() event to this class:

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseBech">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseBech" aria-expanded="false" aria-controls="collapseBech">
    <span>Read More </span><i class="fa fa-caret-down"></i>
</a>

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseTrev">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseTrev" aria-expanded="false" aria-controls="collapseTrev">
    <span>Read More </span><i class="fa fa-caret-down"></i>
</a>

<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseNat">
    <p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseNat" aria-expanded="false" aria-controls="collapseNat">
    <span>Read More </span><i class="fa fa-caret-down"></i>
</a>

<div id="output">
</div>

Now let's check how the code would look like:

$(".clickable-butn").click(function(){
  // now, $(this) is the button we just clicked...
  // Now let's find the id of the .collapse element that is associated to $(this) button
  var idOfCollapse = $(this).attr("href");
  // now that we know its id, we can check if it is visible
  // note that we are checking if it was visible BEFORE the click...
  if($(idOfCollapse).is(":visible")){ 
      $(this).children("span").text($(this).children("span").text().replace("Less", "More"));
      $(this).children("i").removeClass('fa-caret-down');
      $(this).children("i").addClass('fa-caret-up');
    } else {
      $(this).children("span").text($(this).children("span").text().replace("More", "Less"));
      $(this).children("i").removeClass('fa-caret-up');
      $(this).children("i").addClass('fa-caret-down');
  }
});

You will see that when you click the button, the text changes from "Read More" to "Read Less" and vice versa.

Answer 2

you can use build-in Bootstrap's collapse event

$('#collapseBech, #collapseTrev, #collapseNat').on('hide.bs.collapse', function () {
     // do something…
     $(this).next("a").css({"background": "#ff0000"});
     $(this).next("a").children("i").removeClass('More').addClass('Less').removeClass('fa-caret-down').addClass('fa-caret-up');
});
$('#collapseBech, #collapseTrev, #collapseNat').on('show.bs.collapse', function () {
     // do something…
     $(this).next("a").css({"background": "#00ff00"});
});

try this demo

jsfiddle.net/my9z7zhc