jQueryでの開閉式のアコーディオンの動きいろいろ

jQueryでの開閉式のアコーディオンの動き

クリックをすると開閉するようなメニューやコンテンツってよく見かけたりしますし、実際に使いたいってクライアントもけっこう多いですしね。

開閉時の動きについても実際いろいろとあるわけなんですが、今回はjQueryで出来る一番基礎的な事を紹介しておきたいと思います。

demo page

…ここからが続き

デモページの解説

動きの違いはJavascriptの最後の方に記述されている「$(this).next()」の次に指定する要素を変更しているだけです。

「.slideToggle("slow");」の()内には「slowやfast」以外にも数字で指定も出来ますよ。

使い方はjQueryとデモページで記述されているスクリプトをheadタグ内にでも読み込ませて下さい。

Track Back

cubic extria

「関連するエントリー」が多くなりすぎたときに縮める方法

images/item/2009-03/030202.gif" border...

by cubic extria  

Comments

MIYA

MIYA

Cocoさん。

IE6でも使用は可能になっております。

2010年10月04日 14:22

Coco

Coco

こちらのスクリプトはIE6でも使用出来ますでしょうか?

よろしくお願い致します。

2010年09月28日 12:27

MIYA

MIYA

この記事で紹介しておりますアコーディオンは基本的なものであり、二階層にわかってアコーディオンをする仕組みになっておりません…

自分の方でいくつかスプリクトを書き換えてみたのですが、IEで上手く動作しなかった為、こちらは後日調べて、新規の記事にて紹介したいと思います。

2009年04月07日 01:37

moma

moma

はじめまして。質問があり投稿しました。

筆者さまが書かれたJSでアコーディオンを作成しましたが、第2階層にリンクするとアコーディオンが閉じてしまいます。これはどこを修正すれば、開いたままになるでしょうか?

お忙しいところ恐れ入りますが、ご教授いただけますでしょうか。よろしくお願いいたします。

2009年04月06日 16:58

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article