マーカーネット株式会社

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)

執筆者:

関連記事

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

2013年も気が付けば残り1週間。早いものですね~(しみじみ) WEBの業界は流行り廃りが激しいもので、 デザインに限って見ても、この1年間でもさまざまな動きがありましたね。 2014年、WEBデザイ …

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素にfloatをかけて回り込ませる、 というのはコーディングをする際によく使う手法ですよね。 「ブロック要素の高さを揃えたい」と思う事はありませんか? そんな時、私がよく使う便利なjquer …

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …