jQuery Plugin For Read More Functionality - readmore-readless

readmore-readless is a jQuery plugin for Read More or Read Less functionality. Read More is an useful functionality for a website that displays a snippet of each content on the page and have a 'read more' link for visitors to click and read the rest of the content.  Read Less functionality is good for collapsing the long content back to the original state.

How to use it:

1.  Markup

<div id="demo">
<ul class="item">
<li>Item 1</li>
<li class="details">Details of Item 1</li>
</ul>
<ul class="item">
<li>Item 2</li>
<li class="details">Details of Item 2</li>
</ul>
<ul class="item">
<li>Item 3</li>
<li class="details">Details of Item 3</li>
</ul>
</div>

2. Style your READ MORE Button

.button {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
background-color: #49afcd;
 *background-color: #2f96b4;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;

3. Include jQuery library and readmore-readless.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script src="js/jquery.readmore-readless.js" type="text/javascript"></script> 

4. Call the plugin

<script type="text/javascript">

    $(document).ready(function () {

        $("#demo").readMoreReadLess({
            readMoreText: 'Show more items ...',
            readLessText: 'Show fewer items ...',
            readMoreClass:'button',
            readLessClass:'button'
        });
    });
</script>

Change Log:

• Fixed for jQuery 1.9.0+ (By jQueryscript.net)

---

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