CSS3とjQueryでアコーディオン

CSS3アニメーションを使って、アコーディオンを実現します。

jQueryのslideDownよりも幾分、なめらかに動作するかと思います。

サンプルはこちら

http://moeten.info/js/20140908_cssSlide/

メインのソースはこちら

css

dd{
  overflow-y: hidden;
  opacity: 0;
  max-height: 0;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
dd.open{
  opacity: 1;
  max-height: 200px;
}

javascript

$(function() {
  $("dl dt").click(function(){
    $("dd").removeClass("open");
    $("+dd",this).addClass("open");
  });
});

html

<dl>
  <dt>タイトル</dt>
  <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
  <dt>タイトル</dt>
  <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
  <dt>タイトル</dt>
  <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
  <dt>タイトル</dt>
  <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
</dl>

参考リンク

Pure CSS Slide Up and Slide Down