CODEWITHSUNDEEP
jquery
tchaymore
tchaymore

Reputation: 3726

How to implement a "read more" link with jQuery

I want to be able to display a shortened version of a long text field by default, but then have a "read more" link that would expand the field to its full version. I have a pretty simple setup right now, but feel like there should be a more efficient way of doing this.

Here's my current code:

$(document).ready(function () {

    $("#narrative-full").hide();

    $("a#show-narrative").click(function() {
        $("#narrative-short").hide();
        $("#narrative-full").show('fast');
    });
    $("a#hide-narrative").click(function() {
        $("#narrative-full").hide();
        $("#narrative-short").show('fast');
    });
});

This works, but seems clunky. For example, it would be nice to have the original text not flicker or disappear briefly, but instead just smoothly expand. Any suggestions?

Upvotes: 8

Views: 22762

Answers (3)

Sumith Harshan
Sumith Harshan

Reputation: 6445

Check these plugins.You can do this easily.

jQuery Expander

Readmore.js

Simple Jquery and CSS usage.Not the plugin

Upvotes: 1

rebelliard
rebelliard

Reputation: 9611

From jQuery Recipes:

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".message").hide();
                $("span.readmore").click(function(){
                    $(".message").show("slow");
                    $(this).hide();
                });
            });
        </script>
    </head>
    <body>
        <div>
        Styles make the formatting job much easier and more efficient.
        </div>
        <span class="readmore">Read More...</span>
        <div class="message">
        To give an attractive look to web sites, styles are heavily used.
        JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web
        sites. Not only it is easy to learn, but it's easy to implement too. A person must have a
        good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project
        that provides a wide range of features with cross-platform compatibility.
        </div>
    </body>
</html>

Upvotes: 8

Muffun
Muffun

Reputation: 736

You could place the text in a div and place the first part directly in and the rest in a span within the div

<div>
   first part of the text
   <span id="expendable" style="display:none">
     second part of the text
   </span>
</div>

In Jquery you do something like this:

 $("expendable").slideToggle("slow");

The Jquery ref is here.

Upvotes: 1

Related Questions