Minimal jQuery accordion

by bizamajig

HTML

<ul id=accordion>
    <li>
        <h3>1</h3>
        <div>test</div>
    </li>
    <li>
        <h3>2</h3>
        <div>test</div>
    </li>
    <li>
        <h3>3</h3>
        <div>test</div>
    </li>
    <li>
        <h3>4</h3>
        <div>test</div>
    </li>
</ul>

CSS

#accordion {
    width: 500px;
    height: 300px;
    background-color: #f3c150;
}

#accordion li {
    height: 30px;
    overflow: hidden;
/*    background: hsl(2, 40%, 25%);*/
    background-color: #f3c150;
}

#accordion li h3 {
    height: 30px;
}

#accordion li + li {
/*    background: hsl(2, 40%, 35%);*/
    background-color: #f3c150;
    opacity: .8;
}

#accordion li + li + li {
/*    background: hsl(2, 40%, 45%);*/
    opacity: .6;
}

#accordion li + li + li + li {
/*    background: hsl(2, 40%, 55%);*/
    opacity: .4;
}

#accordion li div {
    height: 0;
}

JavaScript

$('#accordion li').mouseover(function(e) {
    $(this).siblings().animate({
        height: 30
    }, 500).end()
    .animate({
        height: 210 // 300 - 30 * 3
    }, 500);
}).first().mouseover();