ساخت FAQ کاربردی با HTML: باز و بسته شدن بدون افزونه

هدف: یک سؤال و جواب جمع‌شونده بساز که با ماوس و صفحه‌کلید باز شود و به جاوااسکریپت وابسته نباشد.

پیش‌نیاز: یک فایل HTML آزمایشی یا بلوک Custom HTML وردپرس؛ کد نمونهٔ زیر را ابتدا در پیش‌نمایش اجرا کن.

عنصر details را ظرف پاسخ قرار بده و summary را اولین فرزند آن بنویس؛ summary متن سؤال قابل کلیک است.

در نمونه، متن سؤال را با «راه‌اندازی سایت چقدر زمان می‌برد؟» و پاسخ را با توضیح واقعی خدمات خودت جایگزین کن.

کد را ذخیره و سؤال را کلیک کن؛ پاسخ باید باز شود و با کلیک دوباره بسته شود.

برای نمایش اولیهٔ پاسخ، ویژگی open را به details اضافه کن؛ open="false" هم آن را باز می‌کند، پس برای بستن ویژگی را حذف کن.

سه سؤال دیگر را با تکرار همین ساختار اضافه کن؛ هر پاسخ باید در ظرف سؤال خودش بماند.

استایل نمونه را اجرا کن؛ رنگ روشن متن، فاصلهٔ داخلی و حاشیه به خوانایی روی زمینهٔ تیره کمک می‌کند.

با Tab روی سؤال برو و Enter یا Space را امتحان کن؛ نشانگر فوکوس باید دیده شود و پاسخ باز و بسته شود.

داخل summary دکمه یا لینک اضافی نگذار؛ برای این تمرین، عنوان ساده باعث می‌شود رفتار بازکردن واضح بماند.

در عرض موبایل و زوم ۲۰۰٪ بررسی کن که سؤال بلند شکسته شود و پاسخ از قاب بیرون نزند.

نتیجهٔ مطلوب: هر سؤال مستقل کار کند، با صفحه‌کلید قابل استفاده باشد و متن پاسخ واقعی بماند؛ این ساختار به‌تنهایی وعدهٔ نتیجهٔ ویژه در گوگل نمی‌دهد.

کد کامل تمرین

<details class="practice-faq">
  <summary>راه‌اندازی سایت چقدر زمان می‌برد؟</summary>
  <p>زمان به امکانات توافق‌شدهٔ پروژه بستگی دارد.</p>
</details>
<style>
.practice-faq { padding:1rem; background:#121c29; color:#f4f7fb; border:1px solid #60758d; border-radius:12px; }
.practice-faq summary { cursor:pointer; font-weight:700; }
.practice-faq summary:focus-visible { outline:3px solid #ffd36a; outline-offset:4px; }
</style>

ساخت FAQ کاربردی با HTML: باز و بسته شدن بدون افزونه