Not exactly like the habbo one, but it's quite similar if you're interested. I suggest learning jQuery over Prototype, the prototype selectors are extremely slow especially #id last time I checked. Plus it's got to 'piggy back' to scriptalous for effects which annoys me. Anyhow here is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.content').css('display', 'none');
$('.link').click(function(){
var id = $(this).attr('id').substr(9);
var content = $('#faq-content-'+id);
if (content.css('display') == 'none')
{
$('.content').slideUp('slow');
content.slideDown('slow');
}
else
{
content.slideUp('slow');
}
});
$('.close').click(function(){
$(this).parent().slideUp('slow');
});
});
</script>
<style type="text/css">
html
{
border: 0;
overflow: auto;
}
body
{
margin: 0;
padding: 0;
font-size: x-small;
font-family: Verdana;
}
#faqs
{
width: 530px;
color: #808080;
list-style: none;
}
#faqs li a
{
color: #808080;
cursor: pointer;
text-decoration: none;
}
#faqs li a:hover
{
color: #76c7e6;
}
.link:hover
{
padding-left: 8px;
}
#faqs li p
{
margin: 0;
color: #808080;
margin-top: 2px;
padding: 8px 8px 25px;
background-color:#efefef;
}
.close
{
float: right;
color: #808080;
}
</style>
</head>
<body>
<div id="container">
<ul id="faqs">
<li>>
<a id="faq-link-1" class="link" href="#">What commands do you get with Habbo Club?</a>
<p id="faq-content-1" class="content">
<img align="right" src="http://images.habbohotel.co.uk/c_images/album98/hc_oillamp.gif">
<b>:chooser</b> ? This brings up a list of all Habbos in the room<br><br>
<b>:furni</b> ? This brings up a list of all items of furni in the room (Only available to Habbos who have been
in Habbo Club for more than one year).<br>To use these commands you just type them where you type to speak and
click return or enter, then a pop up will appear containing the list.<br><br>
<br>
<a class="close" href="#">Close FAQ</a>
</p>
</li>
<li>>
<a id="faq-link-2" class="link" href="#">How do I get the special Habbo Club clothes, furni and room layouts?</a>
<p id="faq-content-2" class="content">
Look in your Hand - within 3 days after you join the club, you'll have an special green HC sofa in there that
only Habbo Club members can get. Every month for the first eleven months, you'll get one item of special HC furni
as a member of the club. To get your cool clothes, hair, and hats etc, go to 'Update my Habbo ID' and scroll
through the options - you'll see the Habbo Club stuff there. To get the special room layouts, make a new guest
room and you'll see the Habbo Club options in the Room-O-Matic.<br><br>
<br>
<a class="close" href="#">Close FAQ</a>
</p>
</li>
<li>>
<a id="faq-link-3" class="link" href="#">I've seen someone with an HC badge - what does that mean?</a>
<p id="faq-content-3" class="content">
<img alt="habbo HC 1" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_1.gif">
<img alt="habbo HC 2" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_2.gif">
<img alt="habbo HC 3" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_3.gif">
<img alt="habbo HC 4" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_4.gif">
<br>
It means that they're a member of Habbo Club.
<a class="close" href="#">Close FAQ</a>
</p>
</li>
</ul>
</div>
</body>
</html>
Here's a pastebin one where you can see the example! http://pastebin.me/490dd8e2e80bc enjoy :)
Oh just for the record - I coded it all.
Wow, well done! I'll be using this. Iszak should be a coding community member. +rep