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 igos

HTML

<a id="save" href="javascript:void(0)">[Save]</a>

<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:url('http://www.epa.gov/region1/images2/misc/accordion-default.jpg') no-repeat right top #559b6a;color:#fff;cursor:pointer;margin:0;padding:4px 10px}
.accordion h3.current{background:url('http://www.epa.gov/region1/images2/misc/accordion-active.jpg') no-repeat right top #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");
    $(this).siblings("h3").removeClass("current");
  });
});