【コピペ可能！】アコーディオンメニューの作り方【HTML・CSS・jQuery】

アコーディオンメニューってどうやって作るんだろう？なんだか複雑そう・・・

私も当初は難しそう・・・思っていましたが、コードを覚えたり・試行錯誤・活用していくうちに、次第にそのような不安も徐々に薄れてくると思います。

アコーディオンメニューは使う機会が非常に多く、実務ではQ&A（FAQ）ページなどによく使われます。

これからご紹介するコードをコピペすれば、すぐに動かすことができるので、是非、利用してみてください！

矢印付きのメニュー

まずは、矢印付きのアコーディオンメニューから見ていきましょう。

See the Pen Untitled by ken (@kensuto) on CodePen.

プラス(+)とマイナス(−)のメニュー

See the Pen accordion-plus by ken (@kensuto) on CodePen.

ひとつ開いたら他は閉じる（矢印・+−）

矢印付きメニューの場合

See the Pen accordion-arrow02 by ken (@kensuto) on CodePen.

+−メニューの場合

See the Pen Untitled by ken (@kensuto) on CodePen.

最初のメニューは開いておく（矢印・+−）

矢印付きメニューの場合

See the Pen アコーディオンメニュー（矢印ver）最初は開いておくver by ken (@kensuto) on CodePen.

+−メニューの場合

See the Pen accordion-plus03 by ken (@kensuto) on CodePen.

ひとつ開いたら他は閉じる & 最初のメニューは開いておく（矢印・+−）

矢印付きメニューの場合

See the Pen accordion-arrow04 by ken (@kensuto) on CodePen.

+−メニューの場合

See the Pen accordion-plus04 by ken (@kensuto) on CodePen.

まとめ：パターンを覚えて使ってみよう

今回はアコーディオンメニューのパターンをまとめました。

上記のように、JS部分は入れ替えたりすることで、動きに変化を加えることが可能です。

カスタマイズしながら試行錯誤してみるのも良いと思います。

以上になります。

けん

ブロガー / WEB制作フリーランス

Twitter

経歴：新卒でIT企業に就職 → 大学・企業・プラグラミングスクールで勉強した知識を活かしてフリーランスに → 最高月収50万円程
得意分野：WordPress/HTML/CSS/JS 等

Web制作を中心にフリーランスとして活動中。
Web制作に関する記事を投稿致します。