人生でやりたい100のこと

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

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

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

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

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

また、ワードプレスご利用の方はテーマに直接、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内に以下のコードを記述しています。

<script type="text/javascript">
$(function () {
$('#panel dt').css("cursor","pointer");
$('#panel dd').hide();
$('#panel dt')
.click(function (e) {
var d = $('+dd', this);
if (d.css('display') === 'block') {
d.slideUp(1000);
} else {
d.slideDown(1000);
}
});
});
</script>

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>

すると↓こんな感じで表示されます。お試しあれ!

あいうえお
かきくけこ
スポンサードリンク

『今』やってること、明日の自分はそのことを誇らしく思うだろうか?
Return Top