jQuery Plugin For Showing More Content - Show More

jQuery Plugin For Showing More Content - Show More
File Size: 15.9KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Show More is a jQuery plugin for displaying more content on clicking the custom trigger for saving the space of your web page. It also can be used for collapsing the long content back to the original state.

Related Plugins:

How to use it:

1. Include jQuery library and jQuery Show More plugin on your web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.showmore.min.js"></script>

2. Markup html structure

<div class="demo">
<h2>Title</h2>
<p>...</p>
<p>...</p>
<p>...</p>
...
</div>

3. The CSS

.showmore_content {
position: relative;
overflow: hidden;
}
.showmore_trigger {
width: 100%;
height: 45px;
line-height: 45px;
cursor: pointer;
}
.showmore_trigger span {
display: block;
}

4. Call the plugin with options

<script>
$(document).ready(function() {
     
$('.showmore_one').showMore({
speedDown: 300,
        speedUp: 300,
        height: '165px',
        showText: 'Show more',
        hideText: 'Show less'
});
  
});
</script>

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