BLOG

【非エンジニア向け】CSSで開閉するアコーディオンメニューを作ってみよう

2016.08.03  Wrote by Toyoaki Notazawa

image

 

デザイナーの野田沢です。
今回はアコーディオンの実装について記事にしてみます。

※アコーディオンとはボタンクリックでテキストや画像なのどのコンテンツを開閉できるものを一般的にはアコーディオンと呼ばれてます、たぶん!

 

この記事は非エンジニさんア向けです。

 

今回はなるべくCSSで実装できるアコーディオンを作ってみました。

今回のポイントは【 + ↔ − 】の切り替えをCCSで実装するところです。

ただのアコーディオンじゃつまらない!という非エンジニアさんは参考にどうぞ。

 

まずデモを見たい方はコチラ

 

下記の記載は順不同ですので、コードを知りたい方は下記リンクよりどうぞ
javascript
html
css

 

 

導入

まず、開閉を指示するJSを記述します。
いきなりJSかよ!と思われた方、すみません。
開閉までCSSにするとCSSのコードがごちゃついてしまい、逆に難しくなってしまう為、今回は開閉の動作のみJSを使用することにしました。

だからとっても短いコードですよ

※実行にはjQueryが必要です。

 

開閉のJSコード

2行目の”.accordion li a”で開閉イベントを実行する部分の指定です。みなさんのhtmlコードに合わせて変更してください。
6・8・12行目の”.accordion_icon”が + ↔ − のアイコンclassになります。こちらもhtmlコードに合わせて変更してください。

JSのコードはこれだけです!

 

 

htmlコード

今回はタイトルとアイコンをひとつのリンクに、アコーディオン自体はリストで量産できるつくりにしました。
必要なのは内包する”accordion”クラスとトリガーとなる”toggle”クラス、そして+-アイコンを表示する”accordion_icon”クラスの3つです。

 

 

cssコード

 

 

今回の目玉、cssです。

基本的にはコピペで使用いただけます。

その上でフォントサイズの調整や余白、アイコンの大きさ等は好みに合わせて変更してください。

39行目で+−アイコンの大きさ、位置を調整しています。

ここはフォントサイズなどベース設定とか変わってくるので調整が必要だと思います。

 

36行目のtransitionの値を変えれば+から−へ変化するアニメーションのスピードを変更できます。

お好みでどうぞ。

 

+ ↔ − へアイコンが変わるアコーディオンの紹介でした。
今回の実装にあたり下記のサイト様を参考にさせていただきました。

 

「開閉するアコーディオンメニューに使える!+から-へ、+から×へアイコンを切り替えるアニメーション」

 

その他の記事を見る