Hoe maak ik dit op in html/css script?

Ik ben helemaal niet zo bedreven in jQuery, maar deze leek me leuk om uit te zoeken. Dit is mijn resultaat: http://jsfiddle.net/r7MgY/

Mocht de link niet werken, ik heb de volgende ingredienten gebruikt:

Als eerste de HTML:



Dan de CSS:

#test {
position: absolute;
right: 0;
width: 0px;
height: 80px;
background: #000;
color: #fff;
padding: 10px 0px 0px 10px;
font-family: Arial;
font-size: 8pt
}

Tenslotte de jQuery:

$(function() {
$('#test').hover(function() { $(this).stop().animate({width: '200px'}) },
function() { $(this).stop().animate({width: '0px'}) }
)
});

De truuk is om in Google de juiste zoektermen te gebruiken: jQuery, animate, width, hover. Succes ermee.

Toegevoegd na 4 minuten:
Ho wacht. De link is http://jsfiddle.net/bMaRn/. Ik was vergeten de vorige te forken.

Toegevoegd na 10 minuten:
ok, snap nu pas hoe jsfiddle werkt. Deze link dan (zucht) http://jsfiddle.net/tonb/6Ykhy/2/ Ook met enkele ontbrekende puntkomma's toegevoegd.