Menu
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 »</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.
830
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.
The aria-controls attribute identifies the element (or elements) whose contents or presence are controlled by the element on which the attribute is set, regardless of what type of interaction initiates the impacted behavior.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
