jQueryでアコーディオンを作る

今回は、Webサイトでよく使うアコーディオンを紹介していきたいと思います。

アコーディオン

html

<ul>
  <li class="btn close">アコーディオン1
    <ul class="btn_l2">
      <li>アコーディオン1-1</li>
    </ul>
  </li>
</ul>

css

ul{list-style:none;}
.btn.close{
	padding: 0 0 0 24px;
	background:url(close.png) no-repeat;
}

.btn.close .btn_l2{display:none;}
.btn.open .btn_l2{display:block;}

.btn.open{
	padding: 0 0 0 24px;
	background:url(open.png) no-repeat;
}

js

jQuery(function(){
	jQuery(".btn").click(function () {
		if($(this).hasClass("close")) {
			jQuery(this).removeClass("close");
			jQuery(this).addClass("open");
		}else{
			jQuery(this).removeClass("open");
			jQuery(this).addClass("close");
		}
	});
});

jQueryはaddClassとremoveClassでクラスを追加したりはずすことで表示したり非表示にします。

上記以外にもtoggleClassを使う方法もあります。

サンプルを見る