- HTML、CSS、JavaScriptを使用した基本的なアコーディオンの作成:
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">セクション1</div>
<div class="accordion-content">セクション1の内容</div>
</div>
<div class="accordion-item">
<div class="accordion-header">セクション2</div>
<div class="accordion-content">セクション2の内容</div>
</div>
</div>
CSS:
.accordion-header {
cursor: pointer;
background-color: #eee;
padding: 10px;
}
.accordion-content {
display: none;
padding: 10px;
}
.accordion-item.active .accordion-content {
display: block;
}
JavaScript:
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('active');
});
});
- jQueryを使用したアコーディオンの作成:
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">セクション1</div>
<div class="accordion-content">セクション1の内容</div>
</div>
<div class="accordion-item">
<div class="accordion-header">セクション2</div>
<div class="accordion-content">セクション2の内容</div>
</div>
</div>
JavaScript (jQuery):
$('.accordion-header').click(function() {
$(this).toggleClass('active');
$(this).next('.accordion-content').slideToggle();
});
これらのコード例は、アコーディオンを作成するための基本的な手法です。デザインや動作をカスタマイズするには、CSSやJavaScriptのコードを調整することができます。また、多くのJavaScriptライブラリやフレームワーク(例:React、Vue.js)もアコーディオンコンポーネントを提供しているため、それらを使用することもできます。
アコーディオンは、ウェブサイトで情報を整理し、ユーザーエクスペリエンスを向上させるための便利なツールです。