HTML,CSS,jQueryでアコーディオンメニューをつくる

自分は,趣味で,HTMLやCSS,jQueryという,Webページを作るのに必要なものを,勉強をしています。

今回,その勉強のために,下の記事を参考にアコーディオンメニューを作りました。

自分と同じように,「アコーディオンメニューを作りたい」という人がいましたら,上の参考にした記事が実際に作ってみて,勉強になったので,見てみてください。

この参考にした記事は,コピペで簡単に実装できるので,初心者の人でも作れます。作った後に,「なんで,これで作れるのだろう?」と考えると,勉強になって,とても面白いです。

アコーディオンメニューとは,クリックすると,アコーディオンのように,開いたり、閉じたりすることのできるメニューのことです。

例えば,上図の「パソコンで作ったもの」というところをクリックすると,

「パソコンで作ったもの」をクリックした後

「Unityでモンキーハンティング」,「Three.jsで,地球の周りの月の運動のシミュレーション」というのが出てきます。

もう一回,「パソコンで作ったもの」をクリックすると,「Unityでモンキーハンティング」,「Three.jsで,地球の周りの月の運動のシミュレーション」が見えなくなります。

「パソコンで作ったもの」を2回クリック

「自分がやったダイエット」をクリックしても,同じことが起こります。

「自分がやったダイエット」をクリック


ここまで,読んでいただきありがとうございます。

今後も,「自分はこういうものを作っていたんだ」という記録のためと,「同じようなものを作ってみたい」という人の為になるように、自分が作ったものを記事にしていこうと思います。



いいなと思ったら応援しよう!

がっきー
よろしければサポートお願いします。 いただいたサポートは,皆さんの役に立つ記事を書くための活動費として,使わせていただきます。