jQueryで開閉可能なアコーディオンパネルを簡単に作成する方法

@83D_new 83-Dさんはじめまして。「人生でやりたい100のこと」ブログ見ました、とても素敵ですね。自分も似たようなブログをやっているのですが83-Dさんのように項目を展開して詳細を出すような感じにしたいのですがこれを実装するのは初心者には難しいですか？

— くろ＠２０個達成 (@kuro1615) 2014, 10月 28

実はこのトップページの開閉するパネルが好評です。
くろ＠２０個達成さん以外にも過去に興味を持ってくれた人がいました。

意外と簡単に実装できるので実装方法を紹介します。

ただ、注意していただきたいのは僕はプロではありません。

もっと効率よく記述する方法はあると思いますし、記述の仕方が間違っているかもしれません。

また、ワードプレスご利用の方はテーマに直接、cssやjQueryを記述するとアップデート時に書き換えられてしまいます。

コードを記述する際は、子テーマを利用すると良いです。

子テーマについては解説する力量を持っていないので、興味のある方はググってみて下さい。
僕より詳しい方が出てくると思います。

ちなみに僕のブログではこの記事で紹介する方法で記述しています。

ブログをはじめてもうすぐ1年になりますが今のところ問題はおこっていません。
興味のある方は参考にしてみてください。

まずは、jQueryを準備しましょう

「jQueryを準備？？初心者にはきついぜ！ダウンロードとかインストールとかセットアップする必要があるんだろ！？」

大丈夫です。
安心して下さい。CDNってのを利用すればダウンロード等はする必要がありません。

「CDNってなんだ？！そういう用語が嫌いなんだよ！！」

大丈夫です。
安心しきって下さい。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
とhead内に記載すればOKです。

jQueryにもバージョンがいろいろあるようですが、詳しい事は割愛します。

また、ワードプレスを利用している方ならデフォルトでjQueryがインポートされているかもしれません。
僕の利用しているテーマではデフォルトでjQueryがインポートされているようです。

jQuaryの記述

jQuaryのインポートが終わったらコードを記述します。

jQueryのコードはhead内に記述するか.jsファイルを作って記述します。
短いコードなので僕はhead内に以下のコードを記述しています。

jQuaryのコードは

$(function () {

});

↑この中に記述します。

それぞれの記述について解説します。

$('#panel dt').css("cursor","pointer");
↑は、#panel 下にあるdt　にマウスオーバーするとカーソルが指になるという記述です。

$('#panel dd').hide();
dd　を非表示の状態にするという記述です。

$('#panel dt')　dtがクリックされたら

.click(function (e) {
var d = $('+dd', this);

dtの直後のdd要素を取得

if (d.css('display') === 'block') パネルがblockつまり表示状態であれば
{
d.slideUp(1000);閉じる（数字は閉じるスピード）
} else { 非表示状態ならば
d.slideDown(1000);開く（数字は開くスピード）
}
});
});
</script>

見た目はCSSで記述します

cssはこんな感じ

#panel dt{
background-image:url("http://100nokoto.com/wp-content/uploads/2014/02/yajirusi1.png") ;
background-repeat: no-repeat;
background-position: right 10pt bottom 6pt;
}

#panel a{
color:#3e1aef;
}

#panel a:hover{
color:#0d93a0;
}

#panel dt:hover{
background-color:#13cbdd;
color:#ffffff;
background-image:url("http://100nokoto.com/wp-content/uploads/2014/02/yajirusi2.png") ;
background-repeat: no-repeat;
background-position: right 10pt bottom 6pt;
}

#panel dt{
background-image:url("http://100nokoto.com/wp-content/uploads/2014/02/yajirusi1.png") ;　
↑これは矢印の画像を背景に設定しています。

background-repeat: no-repeat;　
↑これは矢印の画像がリピートしないようにしています。リピートされると矢印がやたら表示されます。

background-position: right 10pt bottom 6pt;　←これは矢印の位置が右端にいい感じにくるように設定しています。
}

#panel a{
color:#3e1aef;　←これはパネルの中のaタグの色を設定しています。これは直接パネルの開閉とは関係ありません。
}

#panel a:hover{
color:#0d93a0;　←これはパネルの中のaタグにhover、つまりカーソルを持って行った時の色を設定しています。これは直接パネルの開閉とは関係ありません。
}

#panel dt:hover{
background-color:#13cbdd;　←これはパネルのタイトルにhover、つまりカーソルを持って行った時の背景色を設定しています。

color:#ffffff;　←これはパネルのタイトルにhover、つまりカーソルを持って行った時のフォントの色を設定しています。

background-image:url("http://100nokoto.com/wp-content/uploads/2014/02/yajirusi2.png") ;　　←これはパネルのタイトルにhover、つまりカーソルを持って行ったバックグラウンドイメージを設定しています。

background-repeat: no-repeat;　←これは上で紹介した矢印リピートされないように設定しています。

background-position: right 10pt bottom 6pt;←これは上で紹介した矢印の位置が右端にいい感じにくるように設定しています。
}

最後にパネルを表示させたいところに下のタグを記述します

<dl id="panel">
<dt>あいうえお</dt>
<dd>
かきくけこ
</dd>
</dl>