Collapse Long Content With View More Links - jQuery show-more.js

show-more.js is a lightweight jQuery plugin which smoothly collapses and expands long blocks of content with custom Read More and Read Less links.

How to use it:

1. Put both jQuery JavaScript library and the show-more.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.show-more.js"></script>

2. Initialize the plugin on the target long content and set the min height of the collapsed content.

<div id="demo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar, massa id dictum ornare, nulla sem tristique dui, nec interdum sapien magna at augue. Duis eros purus, sagittis in mattis placerat, pretium sit amet leo. Sed vitae consectetur lacus, et consequat erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec rhoncus lorem eget sapien maximus, quis feugiasavet mi porttitor. Suspendisse ut erat dolor. Phasellus porttitor pretium commodo. Curabitur eget venenatis quam, non tincidunt nisl. Aenean lobortis fermentum imperdiet. Maecenas nec ipsum tellus. Nunc mauris dui, iaculis vel ex sit amet, maximus ultricies diam. Morbi ut mi sed ex bibendum tempus. Quisque lobortis eget sem in dignissim. Donec scelerisque massa vitae lectus imperdiet pellentesque id id purus. Fusce ac est at mi mollis mattis.
</div>

$('#demo').showMore({
  minheight: 74
});

3. Style the 'Read More' and 'Read Less' links.

.showmore-button {
  cursor: pointer; 
  background-color: #999; 
  color: white; 
  text-transform: uppercase; 
  text-align: center; 
  padding: 7px 5px 5px 5px; 
  margin-top: 5px;
}

4. Customize the 'Read More' and 'Read Less' text.

$('#demo').showMore({
  buttontxtmore: "show more",
  buttontxtless: "show less",
});

5. Set the animation speed as you expand and collapse the content.

$('#demo').showMore({
  animationspeed: 250
});

Change log:

2018-02-01

• Fixed elements having a max-size of '0px'

---

This awesome jQuery plugin is developed by dtasic. For more Advanced Usages, please check the demo page or visit the official website.