はじめに
jQueryでアコーディオンを実装する場合、slideToggleメソッドを利用すると簡単に実現できます。しかし、素のJavaScriptで実装しようとすると、コンテンツの高さ指定など、意外と難易度が高くなりがちです。
実は、CSSのみでアニメーション付きのアコーディオンを実装する方法があります。本記事では、その実装方法を紹介します。
デモ
コードの解説と実装
この方法は、CSSのgridプロパティを活用します。
アコーディオンのコンテンツ部分を内包する要素に対し、overflow: hidden;を設定した上で、以下のgrid-template-rowsプロパティを使い分けます。
閉じる場合: grid-template-rows: 0fr; を指定
開く場合: grid-template-rows: 1fr; を指定
これにより、コンテンツの高さに関わらず、0frから1frへのスムーズなトランジションが実現します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.accordion-wrapper {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-duration: 300ms;
}
.accordion-wrapper[data-open="true"] {
grid-template-rows: 1fr;
}
.accordion-content-container {
overflow: hidden;
}
</style>
<body>
<button id="toggleButton">
開閉ボタン
</button>
<div class="accordion-wrapper">
<div class="accordion-content-container">
アコーディオンコンテンツ
<br>
アコーディオンコンテンツ
<br>
アコーディオンコンテンツ
<br>
アコーディオンコンテンツ
<br>
アコーディオンコンテンツ
</div>
</div>
<script>
const toggleButton = document.getElementById('toggleButton');
const accordionWrapper = document.querySelector('.accordion-wrapper');
let isOpen = false;
toggleButton.addEventListener('click', () => {
isOpen = !isOpen;
accordionWrapper.setAttribute('data-open', isOpen);
});
</script>
</body>
</html>
まとめ
アコーディオン実装のためだけにjQueryなどのライブラリを導入するのは、パフォーマンス面で懸念が残ります。そういったケースでは、今回ご紹介したCSSのgridとtransitionを活用する方法が、軽量かつアニメーション付きで実装できるため、非常に有効な選択肢となります。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。