こんにちは。佐藤です。
今回はアコーディオンの実装についてです。
アコーディオンといえば、
HTMLだけでの実装もできるようになっております。
また、よくあるものが、jQueryでの制御かなと思います。
今回コーポレートサイト更新に伴い、
一部アコーディオンを実装することになりました。
せっかくなので、下記を意識して実装したかったです。
・滑らかに開くこと
・運用上、内容の高さがバラバラになる可能性が高いコンテンツの為、
アコーディオンの内容の高さに依存しないこと
目次（想定読了時間2分）
アコーディオンのコードペン
下記ご参考にしてください。
実装について
実装ですが、Displayをnoneとblockなどで切り替えるのが最も簡単な方法です。
これであれば、HMTLのみで実装可能です。
ただ、この方法ではパッと開かれてしまい不自然です。
滑らかに開くためには、
Height ＋ Overflow:hidden ＋ transition
で制御する形が良いのではないでしょうか。
ついでにCSSで開閉を明示する「＋」「ー」も実装しておきます。
しかし、HTML＋CSSでも問題が残ります。
内容によって高さを制御できないことです。
それにはJSを使用します。
高さの取得と他への影響の軽減を考えて、
アコーディオンの中身にラッパークラスを付与しました。
これでストレスのないアコーディオンの完成です。
必要に応じて、aria-hiddenでアクセシビリティも考慮できれば尚良いのではないかと思います。
さいごに
私自身の業務の幅が広がって、
より多くのWEBサイトに関わる機会を頂けております。
その中で、JSでの調整が必要な場合に重宝していただけるようになりました。
ユーザビリティをもたらすことはもちろんですが、
キャリアアップにも活用できてJS様様ですね。
それでは！
【リリース】寄付月間2020公式認定企画「想いよ届け！SAKURUGiving GO TO 2030」スタート！特設サイトやSNSでの「リアクション＝想い」の数に応じてジャパンハートに寄付 
一覧へ戻る
