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>