マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

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

投稿日:2014年11月25日 更新日:

【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()同様、サイト内での流用が簡単です。

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

jQueryプラグイン「Colorbox」は便利ですが、 さらにWordPressプラグインとして導入すれば 設定は更に簡単になります。 ソースをいじる必要はありませんので初心者にもおすすめです。 W …