8

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?

3 Answers 3

8

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>
1
  • 5
    clean clean and clean.. Why run behind plugins all the time! Dec 11, 2012 at 5:38
1

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.

1
  • Nice solution! I gave the check to the other answer because the plugin was so customizable, but I liked your solution as well.
    – tchaymore
    Aug 24, 2010 at 19:41
1

Check these plugins.You can do this easily.

jQuery Expander

Readmore.js

Simple Jquery and CSS usage.Not the plugin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.