マーカーネット株式会社

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

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

関連記事

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

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

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

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

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …

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

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

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