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)

by goldfingerxyz

HTML

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

    <div class="pane">
        <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="pane">
        <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="pane">
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
</div>

CSS

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

JavaScript

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