Show more Show less content using jQuery

by  
Share:

Do you ever find yourself having to toggle the content to show more show less using jQuery? You can use this feature when you are only interested in showing portions of an article on content-based websites.

View Demo

About the plugin

To achieve our desired results we will be using the jQuery plugin Readmore.js by Jed Fosters. In our case, this plugin is the ideal solution.

Step 1 – Create page and add library

Start by creating index.html and add jQuery library jquery-1.9.0.min.js and readmore.js plugin file.

Please note: If you already have your template set up, don’t create the index.html file. Just add the jQuery library and readmore.js file to your page.

Steps 2 – Attach plugin to the content

To add show more show less to the content. With a div container, I have used the id attribute with name default (you can use any name of your choice), and finally add some dummy text.

<div id="default">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a odio quis sapien tempus elementum vitae in lacus. Nullam malesuada quam sapien, sed ultrices orci dignissim a. In hac habitasse platea dictumst. Vestibulum non dolor vitae quam pretium fermentum. Mauris feugiat mollis lectus eget sodales. Fusce eu est velit. Sed tristique finibus urna sit amet hendrerit.
                </p>
                <p>
                    Aenean orci risus, molestie sed mi at, egestas laoreet justo. Vivamus in massa urna. Aliquam eros quam, tincidunt ut mollis ut, suscipit sed purus. Pellentesque euismod nisl ac velit interdum, a accumsan neque tempor. In posuere sem sagittis, dapibus tortor et, sollicitudin justo. Sed aliquam sodales fermentum. Nulla in egestas ante, nec bibendum ligula. Nullam tincidunt odio vitae libero congue pretium. Aenean ipsum neque, mattis quis ipsum non, interdum ornare mi. Vivamus pulvinar nisi vel semper porta. Suspendisse mauris magna, commodo nec metus aliquet, pretium dapibus tellus. Praesent eget tortor ex.

                </p>
            </div>

Once the content is setup, we add the script to add show more show less using jQuery.

Note: This toggle works depending on content height, so if the content exceeds the height set by the plugin, then it will display the toggle, otherwise, the whole content will be displayed.

Also, a quick and easy jQuery sliding effect is also discussed in this tutorial.

For the demo, I have used 100px as collapse height, you can adjust as per your template and content design.

<script type="text/javascript">
    $(document).ready(function () {
        $('#default').readmore({
            collapsedHeight: 100,
        });
    });
</script>

Customizing the plugin

There are a few handy options that the plugin provides that allow you to customize it according to your preferences.

Option Description
Speed Change the animation speed
collapsedHeight Height of the collapsible content
heightMargin Avoids collapsing blocks that are only slightly larger than collapsedHeight
moreLink Change the placeholder label of more link
lessLink Change the placeholder label of less link
embedCSS insert required CSS dynamically
blockCSS sets the styling of the blocks
startOpen do not immediately truncate, start in the fully opened position
beforeToggle function is called after a more or less link is clicked, but before the block is collapsed or expanded
afterToggle function is called called after the block is collapsed or expanded
blockProcessed function is called once per block during initilization after Readmore.js has processed the block.

The following is an example of how to override the plugin’s options.

$('your id or class').readmore({
            speed: 1500,
            collapsedHeight: 150,
            heightMargin: 50,
            moreLink: '<a href="#">Show me more</a>',
            lessLink: '<a href="#">Show me less</a>',
        });

View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Dennis on

I really appreciate the work you are doing. I have been learning a lot from you and your tutorials are exactly what I have been looking to learn. Thank you so much.

Reply
Shahrukh Khan on

You are welcome. Thanks for your appreciation.

Reply
Gaurav Mishra on

Thank you very much , you helped me a lot 🙂

Reply
Shahrukh Khan on

You are welcome 🙂

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.