details و summary: آکاردئون بدون نیاز به جاوااسکریپت
حتماً تا حالا تو سایتهای مختلف یه بخش «سؤالات متداول» دیدی که وقتی روی یه سؤال کلیک میکنی، جوابش باز میشه و بقیه بسته میمونن؛ به این الگو معمولاً آکاردئون میگن. جالبه بدونی HTML5 یه راه کاملاً native برای ساخت این قابلیت داره، بدون نیاز به حتی یه خط جاوااسکریپت: تگهای details و summary.
details چیه؟
<details>
<summary>این محصول چه گارانتیای دارد؟</summary>
<p>این محصول ۱۸ ماه گارانتی تعویض دارد.</p>
</details>تگ details یه بخش باز و بستهشونده میسازه؛ بهصورت پیشفرض محتوای داخلش بسته و پنهانه، و فقط با کلیک کاربر روی بخش summary باز میشه. مرورگر بهصورت پیشفرض یه فلش کوچیک کنار summary نشون میده که جهتش با باز و بستهشدن عوض میشه.
summary چیه؟
تگ summary همیشه باید اولین فرزند details باشه و متنیه که همیشه قابلمشاهدهست (چه details باز باشه، چه بسته)؛ این متن نقش دکمهی کلیکپذیر برای باز و بستهکردن details رو داره. بقیهی محتوای details (هر چیزی بعد از summary) فقط وقتی details باز باشه نمایش داده میشه.
خروجی این کد چیه؟
وقتی این کد رو تو مرورگر باز کنی، اول فقط یه خط میبینی: «این محصول چه گارانتیای دارد؟» با یه فلش کوچیک کنارش. با کلیک روی این خط، details باز میشه و متن «این محصول ۱۸ ماه گارانتی تعویض دارد» ظاهر میشه؛ با کلیک دوباره، دوباره بسته میشه.
ویژگی open: باز بودن پیشفرض
<details open>
<summary>اطلاعات مهم</summary>
<p>این بخش بهصورت پیشفرض باز است.</p>
</details>ویژگی open باعث میشه details از همون ابتدا، وقتی صفحه لود میشه، باز و قابلمشاهده باشه، بهجای حالت پیشفرض بسته. کاربر همچنان میتونه با کلیک روی summary، این حالت رو ببنده.
یه بخش کامل سؤالات متداول با چند details
<h2>سؤالات متداول</h2>
<details>
<summary>آیا امکان مرجوعکردن کالا وجود دارد؟</summary>
<p>بله، تا هفت روز پس از خرید امکان مرجوعکردن کالا وجود دارد.</p>
</details>
<details>
<summary>هزینهی ارسال چقدر است؟</summary>
<p>ارسال برای خریدهای بالای پانصد هزار تومان رایگان است.</p>
</details>
<details>
<summary>آیا امکان پرداخت در محل وجود دارد؟</summary>
<p>بله، پرداخت در محل برای تمام شهرها فعال است.</p>
</details>این یه ساختار عالی برای بخش FAQ هست؛ هر details مستقل عمل میکنه، یعنی میتونی همزمان چندتاشون رو باز نگه داری (برخلاف بعضی کتابخانههای آکاردئون که فقط اجازهی باز بودن یکی رو میدن).
مقایسه با dl که تو درس ۳-۷ دیدیم
یادته تو فصل ۳ گفتیم dl هم برای ساختار سؤال-جواب مناسبه؟ فرق مهمشون اینه: dl همیشه تمام محتوا رو یکجا و باز نشون میده، در حالیکه details/summary این امکان رو میده که محتوا پیشفرض بسته باشه و کاربر خودش انتخاب کنه کدوم سؤال رو باز کنه؛ این برای صفحاتی با تعداد زیاد سؤال، تجربهی کاربری تمیزتر و کمازدحامتری میسازه.
محتوای پیچیدهتر داخل details
<details>
<summary>مشخصات فنی کامل</summary>
<table>
<tr><th>وزن</th><td>۱۸۰ گرم</td></tr>
<tr><th>رنگ</th><td>مشکی</td></tr>
</table>
</details>محتوای داخل details محدود به یه پاراگراف ساده نیست؛ میتونه شامل جدول، تصویر، لیست یا هر ترکیبی از عناصر دیگه هم باشه.
یه اشتباه رایج: فراموشکردن summary
<!-- بدون summary -->
<details>
<p>این متن بدون summary نوشته شده است.</p>
</details>اگه summary رو ننویسی، مرورگر یه متن پیشفرض عمومی (مثل «Details» به انگلیسی) نشون میده که هیچ اطلاعات مفیدی به کاربر نمیده؛ همیشه باید summary رو با یه متن گویا و مشخص بنویسی.
چه زمانی از details/summary استفاده کنیم؟
- بخشهای سؤالات متداول (FAQ)
- نمایش/مخفیکردن جزئیات فنی یا اضافی که همهی کاربرها نیاز ندارن
- خلاصهی یه بخش طولانی که کاربر میتونه در صورت تمایل، جزئیات کاملش رو باز کنه
- راهنماها و مستنداتی که بخشهای اختیاری یا پیشرفته دارن
مزیت مهم: بدون نیاز به جاوااسکریپت
قبل از HTML5، برای ساخت همچین رفتار باز/بستهشوندهای، حتماً باید از جاوااسکریپت استفاده میشد (مثلاً گوشدادن به کلیک و تغییر دستی نمایش یه div). details و summary این قابلیت رو کاملاً native و بدون نیاز به کد اضافه در اختیار میذارن؛ این هم کد رو سادهتر میکنه، هم برای کاربرانی که جاوااسکریپتشون به هر دلیلی غیرفعاله، همچنان کار میکنه.
چند اشتباه رایج
- فراموشکردن summary، که باعث نمایش یه متن پیشفرض غیرمفید میشه.
- استفاده از details برای محتوایی که باید همیشه بلافاصله و بدون کلیک اضافه در دید کاربر باشه (مثل هشدارهای مهم).
- تصور اینکه details جایگزین کامل یه آکاردئون پیشرفتهی جاوااسکریپتیه، در حالیکه برای رفتارهای خیلی سفارشی (مثل انیمیشنهای خاص)، ممکنه هنوز جاوااسکریپت لازم باشه.
بهترین روشها
- برای بخشهای FAQ یا محتوای اختیاری/تکمیلی، همیشه از details و summary استفاده کن.
- summary رو همیشه با یه متن کوتاه و گویا پر کن که خلاصهی محتوای داخلش رو برسونه.
- از ویژگی open فقط وقتی استفاده کن که واقعاً بخوای اون بخش از ابتدا باز باشه.
نکتهی سئو
محتوای داخل details، حتی وقتی بسته باشه، همچنان توسط گوگل قابلخواندن و ایندکسشدنه؛ این یعنی میتونی بخشهای FAQ رو با details بسازی بدون نگرانی از اینکه گوگل محتوای پنهانشده رو نادیده بگیره.
نکتهی دسترسیپذیری
details و summary بهصورت native با صفحهکلید هم قابلاستفادهن؛ کاربر میتونه با کلید Tab به summary فوکوس کنه و با Enter یا Space بازش کنه، بدون نیاز به هیچ کد جاوااسکریپت اضافهای برای پشتیبانی از صفحهکلید.
جمعبندی
تگ details یک بخش باز و بستهشونده میسازد که summary بهعنوان همیشهقابلمشاهده و کلیکپذیرش عمل میکند. این ترکیب بدون نیاز به جاوااسکریپت، رفتار آکاردئونمانند ایجاد میکند و برای بخشهای FAQ یا محتوای اختیاری بسیار مناسب است؛ ویژگی open امکان باز بودن پیشفرض را فراهم میکند.