آکاردیون یکی از اجزای کاربردی در طراحی وب است که به شما اجازه می‌دهد اطلاعات زیادی را در فضای محدود نشان بدهید. اما گاهی ممکن است با کلیک بر روی یک آکاردیون، تمامی آکاردیون‌ها باز شوند که این اصلاً رفتار مطلوبی نیست.
ابتدا باید بدانیم چرا این اتفاق می‌افتد. معمولاً این مسئله به دلیل استفاده نادرست از شناسه‌ها و کلاس‌ها در عناصر HTML و یا عدم تفکیک صحیح در دستورات جاوااسکریپت اتفاق می‌افتد. برای برطرف کردن این مشکل، باید با دقت بیشتری شناسه‌ها، کلاس‌ها و دستورات جاوااسکریپت را بررسی کنیم.
در جاوااسکریپت، به‌جای استفاده از یک listener کلی برای تمامی آکاردیون‌ها، باید از روشی استفاده کنیم که بررسی کند کدام آکاردیون دقیقاً کلیک شده است و فقط آن را باز کند. این روش مانع از رفتار غیرمنتظره‌ای که باعث باز شدن تمام آکاردیون‌ها می‌شود، خواهد شد.
همچنین، استفاده صحیح از روش‌های CSS مانند تغییر ارتفاع (height) و یا نمایش (display) می‌تواند کمک کند تا عناصر HTML به درستی نمایش داده شوند، بدون اینکه بر روی دیگر آکاردیون‌ها اثر بگذارند.
در ادامه، کدی را مشاهده می‌کنید که به‌درستی رفتار آکاردیون‌ها را مدیریت می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>حل مشکل آکاردیون ها</title>
<style>
.accordion { cursor: pointer; margin: 5px 0; }
.panel { display: none; padding: 0 18px; background-color: #f1f1f1; }
</style>
</head>
<body>
<h2>آکاردیون ها</h2>
<button class="accordion">بخش ۱</button>
<div class="panel">محتوای بخش ۱</div>
<button class="accordion">بخش ۲</button>
<div class="panel">محتوای بخش ۲</div>
<script>
const accordions = document.querySelectorAll('.accordion');
accordions.forEach((accordion, index) => {
accordion.addEventListener('click', function() {
const panel = accordion.nextElementSibling;
accordions.forEach((acc, i) => {
if (i !== index) { acc.nextElementSibling.style.display = 'none'; }
});
panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
});
});
</script>
</body>
</html><!DOCTYPE html> - نوع سند HTML را تعریف می‌کند تا مرورگر به درستی آن را تفسیر کند.<meta charset="UTF-8"> - مجموعه کاراکترها را تعیین می‌کند تا نوشته‌های فارسی به درستی نمایش داده شوند.<style> - استایل‌های سفارشی برای کنترل نمایش عناصر مانند دکمه و پنل‌ها..accordion - کلاس برای دکمه‌ها که ظاهر و رفتار آنها را تنظیم می‌کند..panel - کلاس برای محتوا که به صورت پیش‌فرض پنهان است تا با کلیک نمایش داده شود.document.querySelectorAll - تمامی دکمه‌های آکاردیون را انتخاب می‌کند.addEventListener('click') - با کلیک بر روی دکمه، پنل مربوطه را نمایش یا مخفی می‌کند.accordion.nextElementSibling - عنصر بعدی (پنل) مرتبط به دکمه آکاردیون را انتخاب می‌کند.
استفاده از این روش، پاسخ مناسب و هدفمند را با کلیک بر روی آکاردیون فراهم می‌کند و مشکلات باز شدن همزمان را رفع می‌کند.