Show And Hide Parts Of Content With jQuery Expandable Plugin

A jQuery plugin for creating expandable content that shows and hides parts of content by changing the height of the container element with toggle buttons.

The plugin automatically hides the content which exceeds the max height and displays a Show More button at the bottom of the content that allows the user to reveal the hidden content when needed.

Ideal for creating fully responsive and mobile-friendly read more/read less content on the cross-platform web applications.

How to use it:

1. Link to jQuery library and the Expandable plugin's files.

<link rel="stylesheet" href="jquery.expandable.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="jquery.expandable.js"></script>

2. Attach the plugin to the long content block and done.

<div class="example">
  Long Content Block Here
</div>

$(function(){
  $('.example').expandable();
});

3. Set the max height of the content block. Default: 200px.

$('.example').expandable({
  'height': 250
});

4. Customize the read more/read less buttons.

$('.example').expandable({
  'more': 'Show more',
  'less': 'Show less',
  'no_less': false
});

5. Customize the duration of the animation. Default: 250ms.

$('.example').expandable({
  'animation_duration': 500
});

6. Auto disable the plugin when the screen size is small than a specific value. Default: 0.

$('.example').expandable({
  expand_responsive : 768
});

Changelog:

2019-10-09

• JS updated

---

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