コトWebのコトお知らせ#apple#wordpress#リフォーム#メモ#日常生活#イベント#陶器#美味しい#調理器具#旅行#coding#料理ホームWebのコトjQueryで簡単アコーディオンのサンプルを作ってみた初回公開日2013-5-9最終更新日2017-6-6#js#美味しい#イベント#浅草#coding#陶器#調理器具#メモ#apple#旅行#リフォーム#日常生活#wordpress#料理jQueryで動くアコーディオンを作ってみました。CSS3のtransitionを利用していますので、IE8以下は▲,▼の表示が表示されません。IE9以降のブラウザで御覧ください。「タイトル」をクリックすると「中身」がぬるっと出てきます。「タイトル」の右側にある▼マークは「中身」が開くと▲に変わります。三角部分はcssで作成しています。画像は使っていません。アコーディオンの中身のlistは#にリンクしています。アコーディオンのサンプルもご用意しましたので御覧ください。dd").css("display","none");.accordionの中のdtをクリックしたとき、それにopenのclassが無かったら付与して(あったら削除して)、その次のddを.slideToggle(“fast”)しちゃってください。dt").click(function(){$(this).toggleClass("open").next().slideToggle("fast");});});といった感じです。.slideToggle(“fast”)がぬるっとした動きを指示しています。速度は、slow、normal、fast、もしくは完了までの時間をミリ秒単位で指定します。”1200”であれば、1.2秒かけてアニメーションが行われます。zipダウンロードjQuery初心者ながらサンプルファイルを作ってみました。良い方法があると思います。cssはsassで出力したので、余計なタグは消してください。おかしい部分がありましたら適宜修正して利用してください。これからもっとjQueryを勉強してサンプルを書いていこうと思います。3,024jQueryを学び始める最初の一冊として購入しました。jQueryの基礎知識についての解説や、サンプルのコードの解説が丁寧なので、技術本を読むのが苦手な人(私のことです)でも理解しやすいかと思います。※jQueryのサンプル記事を追加しました。楽しい休日をテーマにノー・コントロールで記事を投稿しているブログです。フォローをされている方へ、新しい記事を厳選してお届けします。情報を多めに発信しています。著者/運営者情報ソーシャルInstagramfacebookLINE@twitter。