アコーディオンを作ってみよう~Web制作JavaScriptプログラミングjQueryシェアTweetこんにちは。3月も終わりだというのに気温が安定しませんね。それなのに花粉ばかり舞いに舞っているのが非常に恨めしいです。早いところ暖かくなって花見なんてしたいものですね。今回も引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」そんな方です。Blog脱jQuery初心者!コピペに頼らないプログラミング入門講座~その1~こんにちは。気が付けばもう12月ですね。2016年も残り一か月です。クラスの追加と削除~こんにちは。2017年になりました。前回の酉年に起こった出来事というと和泉元彌がプロレスデビューした年だそうです。空中元彌チョップ...忘れられないですね。if文を使った条件分岐~こんにちは。2月14日はふんどしの日だと言い張って聞かない人々が世間にはいるようです。それはそれで面白いと思います。今回も引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います...今回は4週目ということで今までの簡単なまとめとして「アコーディオン」を作っていきたいと思います。目次アコーディオンって何?今回使用するものクリックイベント...removeClassaddClasshasClass...アコーディオンのサンプル新しく出てきたメソッドについてparentsiblingsslideDownslideUpサンプルについての解説まとめアコーディオンって何?アコーディオンとは、クリックによって伸縮して開閉するコンテンツです。楽器のアコーディオンみたいなUI表現です。コンテンツの高さを抑えることができるのでよく見かけると思います。今回使用するものクリックイベント....on('click',function(){}指定した要素をクリックした時に呼び出されるイベントを設定できます。第1回の講座でご紹介したイベントです。removeClass.removeClass()要素に付与されているclassから任意のものを削除できるメソッド。第2回の講座でご紹介したメソッドです。addClass.addClass()要素に任意のclassを付与できるメソッド。第2回の講座でご紹介したメソッドです。hasClass....hasClass()指定された要素が特定のクラスを持っているかを判断するメソッドになります。第3回の講座でご紹介したメソッドです。サンプルを見てみましょう。});});新しく出てきたメソッドについてparent.parent()指定された要素の親要素を全て返すメソッドです。dt’)の中のクリックされた要素$(this)の親要素を指定することになります。dd')指定された要素の兄弟要素を全て返すメソッドです。dd’)を指定することになります。slideDown.slideDown(500);指定された要素の高さを操作して隠されていた要素を表示するメソッドです。slideUpとセットで使用されることが多いです。引数を指定することによってアニメーションの時間を変更することもできます。slideUp.slideUp(500);指定された要素の高さを操作して要素を非表示にするメソッドです。slideDownとセットで使用されることが多いです。引数を指定することによってアニメーションの時間を変更することもできます。dt”)がクリックされた時に↓ここからアコーディオンが閉じていた場合の動きです。.removeClass('close').addClass('open');クラス(‘close’)を削除。クラス(‘open’)を追加。.slideDown(500);0.5秒かけてスライドダウンして表示。↓ここからはアコーディオンが開いていた場合の動きです。.removeClass('open').addClass('close');クラス(‘open’)を削除。クラス(‘close’)を追加。.slideUp(500);0.5秒かけてスライドアップして非表示。いう処理になっています。まとめクラスacoに付帯しているクラスopen、closeで判断してコンテンツの開閉を行うようになっています。今までに比べて少し複雑に見える記述になっていますが、ひとつひとつ考えていくととても簡単な構造になっています。このように様々なメソッド等を駆使することで様々な仕掛けを作ることができます。この講座を足掛けに皆様のjQueryへの理解が深まれば幸いです。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。