Change text in a bootstrap collapse button based on whether the element is collapsed
<p>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.</p>

<p>I am using Collapse buttons from here: <a href="http://getbootstrap.com/javascript/#collapse" rel="nofollow">http://getbootstrap.com/javascript/#collapse</a></p>

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

<p>Minimised: Show More V
Expanded: Show Less ^</p>

<p>I wrote it in 2 scripts because I am quite the gumby with JavaScript:</p>

<pre><code>&lt;Script&gt;
$(".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');
  });
});
&lt;/script&gt;

&lt;Script&gt;
$(".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');
  });
});
&lt;/script&gt;
</code></pre>

<p>The names of the elements are all things like collapseBech, collapseTrev etc.</p>

<p>Is this something obvious I am missing?</p>

<p>The HTML</p>

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

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

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