jQueryで簡単アコーディオンのサンプルを作ってみた

jQueryで動くアコーディオンを作ってみました。

CSS3のtransitionを利用していますので、IE8以下は▲,▼の表示が表示されません。
IE9以降のブラウザで御覧ください。

サンプルの解説

  • 「タイトル」をクリックすると「中身」がぬるっと出てきます。
  • 「タイトル」の右側にある▼マークは「中身」が開くと▲に変わります。
  • 三角部分はcssで作成しています。画像は使っていません。
  • アコーディオンの中身のlistは#にリンクしています。
jQueryについての解説
ページを読み込んだらjQueryしてくださいの指示を出して、


まずは、.accordionの中のddはcssでdisplay:none;して、


.accordionの中のdtをクリックしたとき、それにopenのclassが無かったら付与して(あったら削除して)、その次のddを.slideToggle(“fast”)しちゃってください。

といった感じです。

.slideToggle(“fast”)がぬるっとした動きを指示しています。
速度は、slow、normal、fast、もしくは完了までの時間をミリ秒単位で指定します。
例えば”1200”であれば、1.2秒かけてアニメーションが行われます。

htmlサンプル

CSSサンプル


jQuery初心者ながらサンプルファイルを作ってみました。
きっともっと良い方法があると思います。

cssはsassで出力したので、余計なタグは消してください。
おかしい部分がありましたら適宜修正して利用してください。

これからもっとjQueryを勉強してサンプルを書いていこうと思います。

【おすすめ本】 Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る

価格: ¥ 3,024

jQueryを学び始める最初の一冊として購入しました。
jQueryの基礎知識についての解説や、サンプルのコードの解説が丁寧なので、技術本を読むのが苦手な人(私のことです)でも理解しやすいかと思います。