Bootstrap collapse change button to read less on click

Question

I have the following bootstrap code:

<div class="col-lg-4 col-md-4 col-sm-4" id="collapseTwo">
      <h2>What</h2> 
      <p>Find out what we do</p>
      <div id="what" class="collapse">
       <p>Text here.</p>

      <a class="btn btn-default" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>
    </div>

On click of the button, it will display the text inside "what". I want the button to change from "read more" to "Read Less" when done. Ive found other examples but they dont seem to be with the collapse function and not sure how to implement it.

Any help or pointers in the right direction would be appreciated, thanks.

Answer 1

I done this only using HTML and CSS Check out this example.

[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit non deleniti reiciendis expedita, velit
    excepturi doloremque numquam. Blanditiis, accusantium, at.</p>

  <p>
    <!-- aria-expanded attribute is mandatory -->
    <!-- bootstrap changes it to true/false on toggle -->
    <a href="#block-id" class="btn btn-primary" data-toggle="collapse" aria-expanded="false" aria-controls="block-id">
      <span class="collapsed">
        Show more
      </span>
      <span class="expanded">
        Show Less
      </span>
    </a>
  </p>

  <p class="collapse" id="block-id">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi tempore asperiores et vel perferendis ea
    quisquam eos incidunt veritatis, hic porro voluptates temporibus laborum! Saepe natus vitae eum ex nam, laborum
    optio vel magni hic. Minima pariatur molestiae error a quae sed accusantium voluptas, dolore, mollitia accusamus
    laborum!
  </p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Here Bootstrap has collapse events. Read here : Bootstrap JS Collapse Reference

 <script>
    $('#extra-text').on('hidden.bs.collapse', function () {
      $('#read-more').text('Read More');
    });
    $('#extra-text').on('shown.bs.collapse', function () {
      $('#read-more').text('Read less');
    });
   </script>

Here extra-text is the collapsing div. and read-more is the collapse button or a tag

Answer 3

Why not just create your own jquery listener for this like

<a class="btn btn-default" class = "readbtn" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>

$('.readbtn').on('click', function() { 
  $(this).html('Read less);
});

Hope I get what you were asking and if not please provide a fiddle. Thank you.

Answer 4

You could try to do something like this:

<a class="btn btn-default" data-toggle="collapse" id="link" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>

<script>
$('#what').on('hidden.bs.collapse', function () {
  $('#link').text('Read Less');
})
</script>

Answer 5

I managed to solve it using an answer from:

jQuery: Change button text on click

Thanks for the replies anyway!