Read More Plugin-II

This plugin renders the content in the parent element of itself. The content must be written in a span so as to get the text out of it.

HTML

<!-- This is the structure of the readmore options-->
<div class="readmore">Hello1</div>

<!--This is the defaule popup to be added to each page-->
<div id="readMoreInfo" class="readMoreClass">
    <div id="header">
        <div id="headerContent"></div> <div id="cross"></div>
    </div>
    <div class="content"></div>
</div>

CSS

/*use this style to spice up your read more text*/
.readmore{
    cursor:pointer;
}

div#readMoreClass{
position:absolute;
    width:0px;
    height:0px;
    left:10px;
    top:0px;
    background-color:white;
}
.header{
background-image:url("http://static.jquery.com/ui/images/navigation_s.png");
    background-repeat:repeat-x;
    width:100%;
    height:20px;
}
.headerContent{
    float:left;
}
.cross{
float:right;
background-image:url("http://cdn4.iconfinder.com/data/icons/fugue/icon/cross-script.png");
    width:16px;
    height:16px;
    cursor:pointer;
}
.content{
height:auto;
    width:100%;
}
.commentSpan{
    overflow: hidden;
    height:40px;
    width:375px;
 
}

JavaScript

(function($) {

    $.fn.showInfo = function(content) {
        var readMoreInfoTop = 0;
        var readMoreInfoLeft = 0;
       
            var readMoreOffset = $(this).offset();
            readMoreInfoTop = readMoreOffset.top + 10;
            readMoreInfoLeft = readMoreOffset.left -100;
            var transitTop = readMoreInfoTop + $(this).height();
            var transitLeft = readMoreInfoLeft + 20;
            $('#readMoreInfo').removeClass("readMoreClass");
            $('#header').addClass('header');
            $('#headerContent').addClass('headerContent');
            $('#cross').addClass('cross');
            $('#readMoreInfo').css({
                'position': 'absolute',
                'top': readMoreInfoTop,
                'left': readMoreInfoLeft,
                'height': '0px',
                'width': '0px',
                'border': 'solid 3px grey',
                'border-radius': '5px',
                'z-index':'3',
                'background-color':'white'
            }).animate({
                opacity: 1,
                height: "250px",
                width: "300px",
                borderWidth: "3",
                left: transitLeft,
                top: transitTop
            }, 150, function() {
                
                $('#headerContent').html(" ");
                $('#headerContent').fadeIn(100, function() {
                    $(this).html('<p style="color:white;">Hello World</p>');
                });



            });
            $('.content').html(content);
        $('#cross').click(function() {
            $('.content').html(" ");
            $('#headerContent').html(" ");
            $('#cross').removeClass("cross");
            $('#readMoreInfo').css('position', 'absolute').animate({
                top: readMoreInfoTop,
                left: readMoreInfoLeft,
                height: '0',
                width: '0',
                borderWidth: "0px"
            }, 150);
        });

   ...