Roblox test

HTML

<div class="object-data">
    <div class="header"><img alt="Image:Instance icon.png" src="/images/5/5f/Object_Icon.png" width="18" height="18" border="0">Instance<div class="toggle-arrow">▲</div>
    </div>
    <ul class="methods">
        <li><a href="/index.php?title=Clone_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="Clone (Method) (not yet written)">Clone</a></li>
        <li><a href="/index.php?title=FindFirstChild_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="FindFirstChild (Method) (not yet written)">FindFirstChild</a></li>
        <li><a href="/index.php?title=GetChildren_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="GetChildren (Method) (not yet written)">GetChildren</a></li>
        <li class="protected"><a href="/index.php?title=GetFullName_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="GetFullName (Method) (not yet written)">GetFullName</a></li>
        <li><a href="/index.php?title=IsAncestorOf_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="IsAncestorOf (Method) (not yet written)">IsAncestorOf</a></li>
        <li><a href="/index.php?title=IsDescendantOf_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="IsDescendantOf (Method) (not yet written)">IsDescendantOf</a></li>
        <li><a href="/index.php?title=Remove_%28Method%29&amp;action=edit&amp;redlink=1" class="new" title="Remove (Method) (not yet written)">Remove</a></li>
    </ul>
    <ul class="properties">
        <li><a href="/index.php/Name_%28Property%29" title="Name (Property)">Name</a></li>
        <li><a href="/index.php/Parent_%28Property%29" title="Parent (Property)">Parent</a></li>
        <li><a href="/index.php/Archivable_%28Property%29" title="Archivable (Property)">archivable</a></li>
        <li><a href="/index.php/ClassName_%28Property%29" title="ClassName (Property)">className</a></li>
    </ul>
    <ul class="events">
        <li><a href="/index.php/AncestryChanged_%28Event%29"...

CSS

.object-data {
    background-color: #F9F9F9;
    border: 1px solid #AAA;
    float: left;
    overflow: hidden;
}
.object-data .header{
    text-align: center;
    padding: 4px;
    background-color:  #AAA;
}

.object-data .header img{
    display: block;
    float: left;
    margin-right: 4px;
}

.object-data .header .toggle-arrow{
    display: block;
    float: right;
    margin-left: 4px;
    color: #F9F9F9;
}

.object-data ul {
    border-top: 1px solid #AAA;
    list-style: none;
    margin:0px;
    padding:4px;
    background-color: inherit;
    position: relative;
}

.object-data li {
    padding: 2px 0px 2px 22px;
    background: 0px 50% no-repeat;
}

.object-data .methods li{
    background-image:url(http://wiki.roblox.com/images/b/be/Function_Icon.png);
}
.object-data .methods li.protected{
    background-image:url(http://wiki.roblox.com/images/4/48/ProtectedFunction_icon.png);
}
.object-data .properties li{
    background-image:url(http://wiki.roblox.com/images/0/00/Property_Icon.png);
}
.object-data .events li{
    background-image:url(http://wiki.roblox.com/images/c/c9/Event_Icon.png);
}

JavaScript

var animTime = 500;

$('.object-data').each(function() {
    var $wrapper  = $(this);
    var $toggle   = $('.toggle-arrow',this);
    var $contents = $('ul', this);
    
    function show() {
        $contents.each(function() {
            $(this)
                .stop(1)
                .animate({
                    marginBottom: 0,
                    opacity: 1
                }, animTime);
        });
        $toggle
            .text('\u25B2')
            .attr('title', 'hide');
    }
    
    function hide() {
        $contents.each(function() {
            $(this)
                .stop(1)
                .animate({
                    marginBottom: -$(this).outerHeight(),
                    opacity: 0
                }, animTime);
        });
        $toggle
            .text('\u25BC')
            .attr('title', 'show');
    }
    
    show();
    
    $toggle.toggle(hide, show);
});