Read More Widget

Simple button widget which when clicked produces a animated popup with the relevant information (Text), that is a part of its parent.

HTML

<div class="readmore"><a href="#">hello</a></div>
<div class="readmore"><a href="#">hello2</a></div>
<div class="readmore"><a href="#">hello</a></div>
<div class="readmore"><a href="#">hello</a></div>
<div id="readMoreInfo" class="readMoreClass">
    <div id="header">
        <div id="headerContent"></div>
               <div id="cross"></div>
          </div>
       <div class="content"></div>
      
    
</div>

CSS

.readmore{
    width:100px;
    height:30px;
    background-repeat:no-repeat;
    float:left;
    cursor:pointer;
}
div#readMoreClass{
position:absolute;
    width:0px;
    height:0px;
    left:0px;
    top:0px;
}
.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%;
}

JavaScript

$(document).ready(

function() {
    var readMoreInfoTop = 0;
    var readMoreInfoLeft = 0;

    $('.readmore').click(function() {
        var readMoreOffset = $(this).offset();
        readMoreInfoTop = readMoreOffset.top + 10;
        readMoreInfoLeft = readMoreOffset.left + 10;
        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'
        }).animate({
            opacity: 1,
            height: "200",
            width: "200",
            borderWidth: "3",
            left: transitLeft,
            top: transitTop
        }, 150, function() {
            $('.content').html(" ");
            $('#headerContent').html(" ");
            $('#headerContent').fadeIn(100, function() {
                $(this).html('<p style="color:white;">Hello World</p>');
            });
            var content = $(this).parent().text();
            $('.content').html(content);

        });



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