アコーディオンメニュー

by jyoze

HTML

<div class="box">
  <dl>
    <dt class="open">テスト</dt>
    <dd>テスト</dd>
  </dl>
  <dl>
    <dt>テスト</dt>
    <dd>テスト</dd>
  </dl>
  <dl>
    <dt>テスト</dt>
    <dd>テスト</dd>
  </dl>
</div>

CSS

.box dl {
  position: relative;
  width: 300px;
  margin: auto;
}

.box dl dt {
  height: 30px;
  margin: auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.box dl dd {
  display: block;
}

.box dl dt {
  background: url(https://placehold.jp/300x30.png) 0 0 no-repeat;
}
.box dl dt.open {
  background: url(https://placehold.jp/3d4070/ffffff/300x30.png) 0 0 no-repeat;
}

JavaScript

$(function(){
  $(".box dl dt:not(.open)~dd").hide();
  $(".box dl dt").on("click",function(){
    $(".box dl dt").not($(this)).removeClass("open").siblings("dd").slideUp();
    $(this).toggleClass("open").siblings("dd").slideToggle();
  });
});