Add a “Read More” Link using jQuery

The jQuery Expander Plugin is a simple little jQuery plugin to hide/collapse a portion of an element's text and add a "read more" link so that the text can be viewed by the user if he or she wishes

Here’s a simple way to use this plug-in your HTML

Declare div with class "readmore" or apply class "readmore" to any HTML element

 <div class="readmore">
     The Div Text Comes Here  
  </div>

And add the following jquery code to head section of your HTML page

<head>
<title>Add Read More Link</title>  
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript">
    </script>
    <script src="http://plugins.learningjquery.com/expander/jquery.expander.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        $(function () {
            $('div.readmore').expander({
                slicePoint: 200,
                expandText: 'Click Here to Read More',
                userCollapseText: 'Hide Text'
            });
        });
    </script>
</head>

As you can see, we have used the ‘jQuery’ file and the ‘Expander’ plugin in the <head> of your document. of your document.

Note: In a production application, download the expander code on your server and reference it from there.

 Here is the jquery Expander Plugin Reference

 Working example is Here

Comments

Post a Comment