A Simple Accordion

Using jQuery to create a simple accordion that closes 1 second after page load (so people can see that you can open it)

HTML

<div class="accordions">
     <h3>Section 1</h3>

    <div class="accordion">
        <p>Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a....</p>
    </div>
     <h3>Section 2</h3>

    <div class="accordion">
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula....</p>
    </div>
     <h3>Section 3</h3>

    <div class="accordion">
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
</div>

CSS

.accordions {
    margin:1em 0
}
.accordions h3 {
    background:#559b6a;
    color:#fff;
    cursor:pointer;
    margin:0 0 1px 0;
    padding:4px 10px
}
.accordion h3.current {
    background:#4289aa;
    cursor:default
}
.accordions div.accordion {
    padding:5px 10px
}

JavaScript

$(function () {
    //  Accordion Panels
    $(".accordions div").show();
    setTimeout("$('.accordions .accordion').slideToggle('normal');", 1000);
    $(".accordions h3").click(function () {
        $(this).next(".accordion").slideToggle("normal").siblings(".accordion:visible").slideUp("normal");
        $(this).toggleClass("current");
        $(this).siblings("h3").removeClass("current");
    });
});