jQueryで超簡単アコーディオン

Tags: , | 5分ぐらいで読めるよ!

JavaScript

超簡単アコーディオン

こんにちは!無事、雲力ことクラウドフォース2010も終わってほっと一息のゆぅです!

さて、今回のテーマは「jQueryで超簡単アコーディオン」!
数行のコードで理解しやすく、かつカスタマイズしやすいアコーディオンの作成方法をご紹介します。

材料

いわずもがなのjQueryをご用意ください。
今回、他にプラグイン等は使いません。後は根性とセンスです。

1.HTML、CSSの設定をする。

HTML

<div>
    <h3 class="accordion_head">アコーディオンのトリガー部分</h3>
    <p>アコーディオンする部分。</p>
</div>

accordion_headがトリガー(クリックするボタン部分)です。
名前を変えても(accordion_titleとかbtnとかね)かまいませんが、scriptの部分も忘れずに変更してくださいね。

CSS

.accordion_head {cursor:pointer;}

accordion_headにマウスを持っていくと手のマークになります。
押せるということが分かりやすいので付け足しているだけです。

2.script部分の設定をする

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.accordion_head').click(function() {
		$(this).next().slideToggle();
	}).next().hide();
});
</script>

たったコレだけで準備はOKです。

デモを見る

細かい解説

まずページを表示させるとscript部分6行目の.next().hide();が実行されます。
「トリガー(.accordion_head)の次の要素(next)を隠す(hide)」という命令ですね。
これでアコーディオンしたい部分が隠されて表示されるわけです。

次にトリガークリックで実行される部分。5行目の$(this).next().slideToggle();
このとき$(this)にはクリックしたトリガーが入っています。
「トリガー(.accordion_head)の次の要素(next)をスライド(slideToggle)する」ってことですね。
こう書いておくことで同じページに何個もアコーディオンがあっても、クリックしたトリガーだけ実行されます。
slideToggleなのでクリックで表示非表示を交互に実行します。
slideToggle()の中に’slow’(遅い)、’nomal’(普通(指定なしと同じ))、’fast’(早い)を入れるとスライドスピードも変えられます。

超シンプルなコードなので色々カスタマイズできそうですね。
(classを足して開いているアコーディオンだけ色変えたりとか、一個表示してるときは他のアコーディオンは隠すとか。。。)

超余談

このコード作るより、この記事を書く(入力する)より、メインキャッチ画像(一番上の赤っぽい画像)のアコーディオンのイラスト描くのが時間かかってたりします。。。

————-追記————-
2010.11.01 IE8では動作が美しくなく、marginのバグがあるようだと指摘を受けました。
確かにIE8でデモ見ると動きがガクガクするので、とりあえずmarginはずしてみたところ、はずしてもちょっとだけガックンする。。。
IE8特有の問題のようです。時間あるときに解決法探してみます。。。

————-追記2————-
2010.11.05 一括開閉にチャレンジ!
js部分に下記を追加してみました。

     $('.accordion_all_head').click(function() {
        $('.accordion_head').next().slideToggle();
     });

安直に追加してみただけなので、イロイロ問題ありです。
 ・アコーディオンを入れ子にすると入れ子のほうの実行がちょっと遅いみたいでガクガクします。
 ・個別のアコーディオンが開いていたりするとおかしなことになります。
チャレンジは悲しい結果に。。。(笑)修行して出直します。。。

デモを見る

————-追記3————-
2012.02.27 一番最初だけ開いた状態にチャレンジ!
js部分に下記を追加してみました。

     $('.accordion_head:first').next().show();

一番最初のaccordion_headの次(中身)だけ表示。
ぱっと思いついたのはこんな感じですね。下記のデモページを開くと一番最初の中身が開いた状態で表示されます。

デモを見る

————-追記4————-
2012.03.12 一つのアコーディオンを開くと他は閉まるにチャレンジ!
js部分に下記を追加してみました。

$(document).ready(function(){
	$('.accordion_head').click(function() {
		$('.accordion_head').next().slideUp(); //←ここ追記
		$(this).next().slideToggle();
	}).next().hide();
});

クリックすると最初にaccordion_headの次(中身)を非表示して、
次にクリックしたaccordion_headの次を表示。
CSSを最小限にしてるからなのかなんなのかIEではカクカクします。CSS整えれば大丈夫な気がする。。。

デモを見る

————-追記5————-
2012.03.15 開いているアコーディオンの色を変えるにチャレンジ!
js部分に下記を追加してみました。

$(document).ready(function(){
	$('.accordion_head').click(function() {
		//ここから
		if($(this).is(".selected")){
		    $(this).removeClass("selected");
		}else {
			$(this).addClass("selected");
		}
		//←ここまで追記
		$(this).next().slideToggle();
	}).next().hide();
});

クリックすると最初にクリックしたaccordion_headに選択中用のクラス(selected)が付いているかどうか判断。
ついていればクラスを外す、ついていなければクラスを追加。
IEではカクカクします。CSSで(以下略。)

CSSに下記を追加。

.selected {
	background:選択中の色;
}
.selected + * {
	background:選択中の色;
}

selected + *は隣接セレクタ(+)でselectedの後の要素に適用って意味です。

いま思いつくのはこんな感じです。もっとスマートにかけそうな気もする。。。むむむ。。。

デモを見る

関連記事

Trackback URL

*トラックバックされる際にはこの記事へのリンクをお願い致します。

Trackbacks

Comments

  • リストタグを使わずにアコーディオンできる方法を探していました!
    記述する内容も少なくシンプルで分かりやすくて魅力的です。

    しかし、私の想定していた方法では閉じることができなくなってしまいます。↓

     ←子を全て一括で開閉したい

    firefoxでは閉じるのを嫌がるようなそぶりを見せてくれます(苦笑

  • Pidget様>>
    コメントありがとうございます!

    追記2で一括開閉にチャレンジしてみたのですが、
    微妙な結果になってしましました。。。力不足で申し訳ないです。。。

  • thank you!

  • 初心者なのでどのサイトも難しそうでしたがこれはシンプルでいいですね。
    初期状態ではアコーディオンがすべて閉じてしまいますが、1番上だけ開いた状態で表示させるにはどうしたらいいでしょうか?

  • 初心者様>>
    コメントありがとうございます!

    追記3で一番最初だけ開いた状態にチャレンジしました!
    こちらでいかがでしょうか?

  • 今まで見た中で一番シンプルで丁寧な解説で初心者の私でも理解でき、とっても助かりました!!

  • とてもシンプルでJavascriptとか全然わからなくてもこれなら使えそうです!
    ただ、1つが開いたら他は閉じるように改良してみようと、わからないなりに試してみましたが・・・htmlが少し読めるだけの私にはよくわかりませんでした。どうすればよいでしょうか。。。

  • taka様>>
    コメントありがとうございます!
    追記4で「一つのアコーディオンを開くと他は閉まる」にチャレンジしてみました!

  • ありがとうございます!
    シンプルでも色々とできてしまうんですね。
    デモを見るのリンクが3になっていたようなのでURLで4にして拝見致しました!

  • taka様>
    わー失礼しました!
    光速で修正しました!(URL)

  • 当方Js初心者です。
    とても使いやすい、しかもすべて説明してあってわかりやすいコードをありがとうございます。

    1つしつもんです。文中にclassを追加して選択されているものだけ、色を変えるという表現があるのですが、background_color:などを指定すればよいのですか?

    すみませんがよろしくお願い致します。

  • kuzira様>>
    コメントありがとうございます!

    書いた本人さえ忘れていたカスタマイズ案(笑)を追記5でチャレンジしました!
    jsで選択中のアコーディオンにクラスを追加して、CSSでそのスタイルの設定をしてみました。
    もちろんjsに直接スタイルを追加する書き方でも出来るのですが、後々変えたいときにCSSで書いておいたほうが楽なので。

  • ありがとうございます!
    とってもわかりやすいです。
    いつもif else と考えて頭が混乱します。

  • jQuery初心者です。
    人にやってもらったアコーディオンの記述が
    どうしても気に入らなくて(笑)いいやり方を探していてたどり着きました。
    コードもすっきりだし、わかりやすくて助かりました!

    ブログデザインも素敵ですね。
    他記事も興味のあるものばかりなので、
    読ませていただきます!

Leave a Reply

*は入力必須項目です。