jQuery Plugin For Showing More Content - Show More

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:

• jQuery Plugin For Read More Functionality - readmore-readless

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.