ansaurus

Question

How to implement a "read more" link with jQuery

Answer 1

+5 A:

There's a plugin for that. Don't reinvent the wheel.

Stefan Kendall 2010-08-24 03:12:38

+1 We referred him to the same plugin... deleting my answer now :)

Josh 2010-08-24 03:14:37

Very slick plugin, and nicely customizable. Wish it had come up in my Google search, but glad that y'all pointed it out to me. Thanks!

tchaymore 2010-08-24 19:41:13

Answer 2

+1 A:

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.

Muffun 2010-08-24 03:19:18

Nice solution! I gave the check to the other answer because the plugin was so customizable, but I liked your solution as well.

tchaymore 2010-08-24 19:41:48

Answer 3

+1 A:

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>

Rafael Belliard 2010-08-24 03:25:24

ansaurus

tags:

views:

answers:

How to implement a "read more" link with jQuery

related questions