jQuery Plugin To Auto Expand/Collapse Content Based On Screen Size - autoexpend

autoexpend is a jQuery plugin which auto expands / collapses specific content within the document according to the screen size. Similar to the Wordpress' 'more' tag which truncates your long content so the user can click the “Show More” link to show the full content. The plugin is licensed under the Creative Commons Attribution 4.0 International License.

How to use it:

1. Download and put the ina.autoexpand.js after loading jQuery JavaScript library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/ina.autoexpand.js"></script>

2. Add the more tags to your long content like this:

<!-- more -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Morbi blandit volutpat velit vel tristique. </p>
<!-- more -->

3. Call the function on the text container and done.

$('.container').collaps();

4. By default, the plugin will automatically collapse your content with a 'Show More' link when the screen size is less than 768px. You can override the default breakpoint in the JavaScript like this:

$('.container').collaps({
  width: 767, // 767px
});

5. Change the default 'more' tag.

$('.container').collaps({
  open: '<!--more-->'
});

6. Change the default CSS classes.

$('.container').collaps({
  containerClass: null,
  clousureClass:'more-content',
  moreClass:'showmore',
});

---

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