JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Slide content with jQuery</h1>
<div id="content-links">
<a href="#">Title1</a>
<a href="#">Title2</a>
<a href="#">Title3</a>     
<a href="#">Title4</a>     
<a href="#">Title5</a>
</div>

<div id="content-container">
<div id="content-box">

<div>
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per.
</div>

<div>
Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non,
</div>

<div>
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss
</div>

<div>
Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne,
</div>

<div>
Beben Koben si bloglang anu ganteng kalem tea!!! Prikitiw...jangan lupa sholat ya^^
</div>

</div>
</div>
<p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/" >KOBEN</a></p> 
<footer>
    <a class="orig"  href="http://beben-koben.blogspot.com/" title="GO BACK TO ARTICLE"> &laquo; Back to</a>

    <h1><a href="http://beben-koben.blogspot.com/2011/09/slide-content-with-jquery.html">Slide content with jQuery</a></h1>
</footer>

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#999;
    color:#000099;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited{color:#a00;text-decoration:none}
footer
{
    background:#333;
    position:fixed;
    width:100%;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h1
{
    font:25px/26px Acens;
    font-weight:normal;
    left:70%;
    margin:0px 0 0 150px;
    padding:25px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
   ...

JavaScript

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