Sliding Read More in JQuery

In this tutorial we are going to see how read more option can be effectively and attractively used using JQuery.

XHTML Coding

Here we are creating the layout of the page using <div> tag, then using that <div> tag we are going to apply the JQuery.

<div id="container">
    <h1>jQuery slide with minimum height
    <h2>About Billabong</h2>
    <div id="wrap">
        <div>
            <p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>
            <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
            <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
            <p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>
        </div>
        <div id="gradient"></div>
    </div>
    <div id="read-more"></div>
</div>

 

JQuery Coding

Using JQuery Coding we are going to apply the sliding animation.

$(function(){
    var slideHeight = 75; // px
    var defHeight = $('#wrap').height();
    if(defHeight >= slideHeight){
        $('#wrap').css('height' , slideHeight + 'px');
        $('#read-more').append('<a href="#">Click to Read More</a>');
        $('#read-more a').click(function(){
            var curHeight = $('#wrap').height();
            if(curHeight == slideHeight){
                $('#wrap').animate({
                  height: defHeight
                }, "normal");
                $('#read-more a').html('Close');
                $('#gradient').fadeOut();
            }else{
                $('#wrap').animate({
                  height: slideHeight
                }, "normal");
                $('#read-more a').html('Click to Read More');
                $('#gradient').fadeIn();
            }
            return false;
        });
    }
});

CSS Coding

/* simple reset */
html,body,div,h2,p {margin:0;padding:0;}

html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
a {color:#0087f1;}
p {margin-bottom:5px;}
#container {
margin:0 auto;
width:600px;
}
#container h2 {
font-size:20px;
color:#0087f1;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#gradient {
width:100%;
height:35px;
background:url(images/bg-gradient.png) repeat-x;
position:absolute;
bottom:0;
left:0;
}
#read-more {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;
}
#read-more a {
padding-right:22px;
background:url(images/icon-arrow.gif) no-repeat 100% 50%;
font-weight:bold;
text-decoration:none;
}
#read-more a:hover {color:#000;}

Source