【jQuery】 超簡単！アコーディオンメニュー ②

html5の新属性、独自データ属性”data-〇〇”を使ってみましょう！！

デモ

HTML

※赤字部分が前回のソースに追加した部分です。

<h3 class=”accordion” data-content=”#box01″><span>アコーディオンタイトル</span></h3>
<div id=”box01″>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
</div>
<h3 class=”accordion” data-content=”#box02″><span>アコーディオンタイトル</span></h3>
<div id=”box02″>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
</div>
<h3 class=”accordion” data-content=”#box03″><span>アコーディオンタイトル</span></h3>
<div id=”box03″>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
<p>コンテンツコンテンツコンテンツコンテンツ</p>
</div>
</div>

CSS

h3{
color:#fff;
padding:10px;
background:#333;
cursor:pointer;
}
h3 span{
display:block;
background:url(開く時の画像) no-repeat right 50%;
}
h3.bg02 span{
background:url(閉じる時の画像) no-repeat right 50%;
}
div{
padding:20px;
display:none;
}

jQuery

<script>
$(function(){
$(“.accordion”).click(function(){
$(this).toggleClass(“bg02″);
$($(this).attr(“data-content”)).slideToggle();
});
});
</script>

解説

前回は.next()でclass=”accordion”がついた要素の次にくる要素を開閉しました。
デザインの都合上、次の要素にできない！！
そんな時に便利なのがhtml5の新属性、独自データ属性”data-〇〇”です。

class=”accordion”がついた要素のdata-〇〇属性の値で指定された要素を開閉します。独自データ属性は自分で作ることができる属性です。〇〇の部分は自分の好きに決めてOKです。今回はdata-contentとしました。

$(this).toggleClass(“bg02″);
→これは前回と同じです。クリックした要素にクラス”bg02″があれば外す、なければ追加する。（cssで指定している背景の矢印画像を変えるためです。）

$($(this).attr(“data-content”)).slideToggle();
→これをばらしてみると・・・

①$(this).attr(“data-content”)
→クリックした要素のdata-content属性を取得する。

②.slideToggle()
→開いている場合は閉じる、閉じている場合は開く。

つまり・・・1個目の.accordionをクリックした場合は、
①で取得できる値は#box01
なので、1個目の.accordionをクリックしたら#box01を開閉します。

.next()ではだめだ～という時は是非、独自データ属性”data-〇〇”を使ってみましょう！！
こちらも.next()同様、サイト内での流用が簡単です。