読者です 読者をやめる 読者になる 読者になる

CSS3とjQueryでアコーディオン

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

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

f:id:haru-komugi:20140908191250j:plain

サンプルはこちら

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>