Simple Accordion #2

by Erik Woods

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<dl class="accordion">
  <dt>Option 1</dt>
  <dd><span>Content 1</span></dd>
  <dt>Option 2</dt>
  <dd><span>Content 2</span></dd>
  <dt>Option 3</dt>
  <dd><span>Content 3</span></dd>
</dl>

<footer>
  <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

body {
  background: #e90;
}

dl {
  margin: 10px;
}

dt {
  cursor: pointer;
  margin: 0 0 4px 0;
  padding: 10px;
  text-decoration: underline;
}

dt:hover,
dt:focus,
dt:active,
dt.on {
  background: rgba(255, 255, 255, 0.6);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

dd {
  border: 0 none;
  border-bottom: 1px dotted #4D4D4D;
  display: none;
  margin: 0 0 10px 0;
}

dd span {
  display: block;
  padding: 10px 20px;
}

footer {
  background: #ff0;
  border: 0 none;
  border-top: 1px solid #000;
  bottom: 0;
  color: #000;
  padding: 10px;
  position: fixed;
  width: 100%;
}

JavaScript

clickyStuff($('.accordion dt:first-child'));

$('.accordion dt').click(function() {
  var clicked = $(this);

  if ($('.accordion dd.on').length && clicked.next().is(':not(".on")')) {
    $('.accordion dt.on').removeClass('on');
    clicked.addClass('on');
    $('.accordion dd.on').removeClass('on').slideToggle(500, function() {
      clicked.next().addClass('on').slideToggle(500);
    });
  }
});

function clickyStuff(obj) {
  obj.next().toggleClass('on').slideToggle(500);
  obj.toggleClass('on');
}