jQuery Animated Information Box

This post shows how to have a animated information box with jQuery. There are a series of links and when the user either clicks the link or moves their mouse over it, the content in the box next to it changes. This can be useful when showing features of a software product, web hosting etc.

Working Example

The best way to show what I’m talking about is with an example. If you are viewing this in an RSS reader then click through to read this post in a web browser otherwise it won’t work for you.

How it works

The box on the right contains 5 divs, one for each of the links. Each div is the same height as the container and the overflow is hidden. When the user clicks the link, jQuery gets the index of the element that’s clicked and animates the top margin of the container to the correct position.

The HTML

Here’s the HTML used in the above example:

<div id="example-links">
    <a href="#">Example 1</a>
    <a href="#">Example 2</a>
    <a href="#">Example 3</a>
    <a href="#">Example 4</a>
    <a href="#">Example 5</a>
</div>
<div id="example-content-container">
    <div id="example-content">
        <div><b>Example content 1</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div>
        <div><b>Example content 2</b><br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div>
        <div><b>Example content 3</b><br />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div>
        <div><b>Example content 4</b><br />Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div>
        <div><b>Example content 5</b><br />Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div>
    </div>
</div>
<div style="clear:both"></div>

The jQuery

And here’s the jQuery:

$('#example-links a').click(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
    return false;
});

The return false line at the end prevents the browser from clicking through to the link. You could alternatively make the animation work when the user hovers over the link instead, and allow the link to click through to the actual page. Do that like so:

$('#example-links a').hover(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});

The CSS

And finally, here’s the CSS used in the above example:

#example-links {
    border: 1px solid #ccc;
    border-bottom: none;
    float: left;
    width: 200px;
}
#example-links a {
    border-bottom: 1px solid #ccc;
    display: block;
    font-size: 17px;
    height: 39px;
    line-height: 39px;
    padding-left: 10px;
}
#example-links a:focus {
    outline: 0;
}
#example-links a:hover {
    background-color: #ddd;
}
#example-content-container {
    border: 1px solid #ccc;
    border-left: none;
    height: 200px;
    overflow: hidden;
    width: 350px;
}
#example-content div {
    height: 200px;
    padding: 10px;
}

Obviously change any or all of the above to suit your own project.