アコーディオンメニューの作り方【 jQuery 】

この記事では,アコーディオンメニューの作り方について紹介します.

アコーディオンメニューとは,クリックしたら中身が表示されて,もう一度,クリックすると,中身が隠れるアコーディオンのような動きをするメニューのことです.

こんにちは1

と〜げ

ちなみに,これは,このブログのテーマ(Sango)のショートコードを使っています.

今回は,jQueryでのアコーディオンメニューの作り方を紹介していきます.

と〜げ

ただし,詳しい作り方を説明せず,ここでは,私が作成したサンプルコードと,私が実際に使った作り方の学び方ついて紹介します.

アコーディオンメニューの作り方

サンプルコード

こちらが,jQueryで作ったアコーディオンメニューです.

See the Pen
AccordionbyjQuery
by Yoshitaka (@YOSHITAKA3)
on CodePen.

htmlファイル:index.html
cssファイル:style.css
jsファイル:script.js

学び方

私は,progateのjQueryの中級編で学びました.意外にも数時間で作れるようになりました.

 

他にも,cssでのみで作る方法や,Bootstrapを使って作る方法があります.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です