slideToggle()といったメソッドがあります。これらを使用すると、少ないコードで要素をスライドしつつ表示/非表示にできるので、すごく便利ですね。案件によっては、jQueryを使いたくない場合があるかと思います。そこで今回の記事では、jQueryのslide系メソッドをJavaScriptで実装する方法を紹介します!「jQueryを読み込みたくないけど、slide系のメソッドは使用したい」という方は、ぜひ使ってみてください。slideToggleのDEMO以下にJavaScriptとjQueryで実装したDEMOを用意しました。DEMOには以下の3つの機能を持つボタンを実装しています。slideUp...要素をスライドしながら隠すslideDown...要素をスライドしながら表示するslideToggle...slideUpとslideDownを交互に切り替えるまずは実際の挙動を確認してみてください。JavaScriptで実装した場合のDEMOこちらはJavaScriptでslideUp・slideDown・slideToggleを実装したDEMOです。それぞれのボタンをクリックして、動作を確認してみてください。slideToggleのDEMOjQueryで実装した場合のDEMO続いてはjQueryのslideUp・slideDown・slideToggleを使用したDEMOです。jQueryには、これらのメソッドがはじめから用意されていますね。slideToggleのDEMO【比較した結果】JavaScriptでjQueryのslide系メソッドを再現可能!2つのDEMOを確認していただくとわかると思いますが、JavaScriptでjQueryのslide系メソッドを再現できていますね。そもそもjQueryはJavaScriptで構成されたライブラリなので、当然素のJavaScriptでも実装することができます!次で実際のJavaScriptのコードを見ていきましょう。slideToggleの3つの関数のコードです。}};これらを使用する場合は、以下のように記述します。slideToggleの関数には、それぞれ2つの引数を指定できます。第二引数:アニメーションの実行時間(ms)第一引数には、スライドしながら表示/非表示させるターゲット要素を指定します。第二引数には、アニメーションの実行時間をミリ秒単位で指定できます。こちらにはデフォルト引数を設定しているので、空白の場合はデフォルト値が適用されるようになっています。これでJSコードの全体像が確認できました。次からは、それぞれの関数の解説をしていきます。slideToggleの実装コードを順番に解説していきます!コードを理解したいという方は、ぜひ読んでみてください。slideUpの解説まずはslideUpから説明していきます。slideUpは、要素をスライドしながら非表示にすることができます。以下のDEMOでもう一度確認してみてください。slideToggleのDEMO要素が上にスライドしながら隠れるのが確認できたかと思います!以下でslideUpの実際のコードをみていきましょう。duration);};こちらがslideUpの全体像ですね。分解しつつ説明していきます。"hidden";ターゲット要素のスタイル属性にheightを設定。値にはoffsetHeightで取得したターゲット要素の高さが入る。transitionを適用するプロパティを指定。paddingを徐々に変化させたいので、これらを指定。transitionの実行時間を指定。引数として設定したdurationの値が入る。transitionのタイミング関数を指定。アニメーションの進行具合を調整できる。linearなどを指定可能。margin-bottomの値を0にする。marginにtransitionがかかるよう指定しているので、この時点で要素の高さが徐々に小さくなっていき、最終的には0になります。duration);ここではsetTimeoutを使用して、アニメーション完了後の指定をします。noneを指定して要素を非表示にする。アニメーション完了後、必要なくなったプロパティを一斉に削除。続いてはslideDownを解説していきます。slideDownは、要素をスライドしながら表示することができる関数ですね。以下のDEMOで動作確認してみてください。slideToggleのDEMO要素が下にスライドしつつ、徐々に表示されるアニメーションが確認できたかと思います。以下でslideDownの実際のコードをみていきましょう。duration);};slideDownの実装コードは以上です。先ほど説明したslideUpのコードとの共通点が多めですね。display;ターゲット要素のstyle属性にdisplayが設定されている場合、削除。ターゲット要素のdisplayプロパティの値を取得し、変数displayに値を格納。noneが設定されている場合、blockを指定。2で変数displayに格納した値を、style属性のdisplayの値に設定。要素のdisplayの値がnoneの場合...blockを指定する要素のdisplayの値がnone以外の場合...CSSで指定されている値をそのまま指定するという処理を行なっています。slideDownは要素を表示する役割を持つので、displayの値はnone以外にする必要がありますよね。flexなど、ターゲットにどのプロパティが設定されていても柔軟に対応することができます。0;変数heightにターゲット要素の高さを格納。上下marginを0にしてstyle属性に設定。transition-timing-functionをそれぞれ設定。*/el.style.removeProperty("padding-top");el.style.removeProperty("padding-bottom");el.style.removeProperty("margin-top");el.style.removeProperty("margin-bottom");5で取得した高さをstyle属性のheightに設定。marginの上下の値をstyle属性から取り除く。上下marginの値を0にしましたね。ステップ910では、0にしたそれぞれの値をもとの数値に戻していきます。5で取得した要素の高さを、style属性のheightに指定します。これで要素が持つ本来の高さを指定できました。marginをstyle属性から取り除きます。これでCSSに指定したpaddingとmarginが適用されるようになり、要素を元通りにすることができました。duration);アニメーション完了後、必要なくなったプロパティを一斉に削除。アニメーション完了後、いらなくなったプロパティをstyle属性から取り除きます。最後にslideToggleの解説をしていきます。slideToggleは、要素が隠れている場合はスライドしながら表示、表示されている場合はスライドしながら非表示にする関数です。DEMOで動きを再確認しておきましょう。slideToggleのDEMO要素がスライドしながら表示/非表示を交互に切り替えるアニメーションが確認できたかと思います。以下がslideToggleの実装コードです。}};要素のdisplayプロパティの値がnoneかどうかを判定。slideDown関数を返して要素を表示する。slideUp関数を返して要素を隠す。ここではまずクリックした段階で要素が表示されているかどうかを判別します。displayの値がnoneの場合、要素は非表示であるという意味になりますね。その場合はslideDown関数を返して要素を表示します。反対に、displayの値がnone以外の場合は、要素は表示されている状態なので、slideUp関数を返して要素を隠します。slideToggleメソッドを素のJavaScriptで実装する方法を紹介しました。jQueryは便利なライブラリですが、使用したくない場面もあるかと思います。Webサイト上では、アコーディオンメニューがよく使われていますよね。ユーザーが欲しい情報をピンポイントで探せるページが縦...記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。PM不明点がありましたのでご質問させて頂ければと存じます。Downのコードでel.style.removeProperty(“display”);の表記がございますが、こちら必要でしょうか?noneとblockの付け外しのみで良いような気がしたのですが、特別に記載している理由があればご教示頂けたら幸いです。“block”;宜しくお願い致します。PMコメントありがとうございます!おっしゃる通りで、もし’block’と’none’を切り替えたい場合はremovePropertyの記述は必要ありません。’block’以外の値(例えば’flex’や’inline-block’など)にも対応したい場合は、必要になります。以下で、’flex’と’none’を切り替えたい場合について説明しますね。前提として、CSSは以下のようになっています。かりづらい説明で申し訳ないです・・。簡潔に言うと、removePropertyの行を記述しないと、CSS側で’flex’や’inline-block’を指定しても、slideDownを使用すると’block’になってしまうということです。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。