マーカーネット株式会社

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

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

関連記事

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

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

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

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

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

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

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