تگ‌های جزئیات و خلاصه

تگ‌های جزئیات و خلاصه (<details> و <summary>): کنترل نمایش محتوا! 🧐

سلام دوستان! امروز می‌خوایم با دو تا تگ خیلی جالب و کاربردی آشنا بشیم: <details> و <summary>. این تگ‌ها به ما کمک می‌کنن تا بخشی از محتوای صفحه رو به صورت پیش‌فرض مخفی کنیم و فقط زمانی که کاربر روی یه عنوان کلیک می‌کنه، اون محتوا رو نشون بدیم. فکر کنید مثل یه منوی آکاردئونی یا یه بخش “بیشتر بخوانید”!

این تگ‌ها برای مواقعی عالی هستن که می‌خوایم یه توضیح طولانی رو مخفی نگه داریم تا صفحه شلوغ نشه، ولی در عین حال به کاربر اجازه بدیم هر وقت خواست به اون اطلاعات دسترسی پیدا کنه.

ساختار و نحوه کار:

برای استفاده از این قابلیت، به دو تگ نیاز داریم:

• <details>: این تگ اصلی هست که محتوای قابل نمایش و مخفی رو در بر می‌گیره. مرورگرها معمولاً یه آیکون کوچیک (مثل مثلث یا فلش) کنارش نشون می‌دن که نشون می‌ده محتوا قابل باز و بسته شدنه.
• <summary>: این تگ باید **اولین** عنصر داخل <details> باشه. متنی که داخل <summary> قرار می‌گیره، همون عنوان یا خلاصه هست که کاربر با کلیک روش، محتوای باقی‌مونده داخل <details> رو می‌بینه یا مخفی می‌کنه.

مثال کاربردی: بخش پرسش‌های متداول (FAQ)

فرض کنید می‌خوایم یه بخش پرسش و پاسخ ساده برای وب‌سایتمون درست کنیم:

<div style="border: 1px dashed #483d8b; padding: 15px; border-radius: 8px;"> <!-- فقط برای زیبایی بصری -->
  <h3 style="color: #483d8b;">سوالات متداول</h3>

  <details style="margin-bottom: 15px; border: 1px solid #eee; padding: 10px; border-radius: 5px;">
    <summary style="color: #9370db; font-weight: bold; cursor: pointer;">HTML چیست؟</summary>
    <p style="margin-top: 10px; color: #555;">
      HTML (HyperText Markup Language) زبان استاندارد برای ایجاد صفحات وب است. این زبان ساختار محتوای صفحه وب را با استفاده از تگ‌ها تعریف می‌کند.
    </p>
  </details>

  <details style="margin-bottom: 15px; border: 1px solid #eee; padding: 10px; border-radius: 5px;">
    <summary style="color: #9370db; font-weight: bold; cursor: pointer;">تگ‌های معنایی (Semantic Tags) چه اهمیتی دارند؟</summary>
    <p style="margin-top: 10px; color: #555;">
      تگ‌های معنایی مانند <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;article&gt;</code> به موتورهای جستجو و صفحه‌خوان‌ها کمک می‌کنند تا ساختار و معنای محتوای صفحه را بهتر درک کنند و همچنین خوانایی کد برای توسعه‌دهندگان را افزایش می‌دهند.
    </p>
  </details>

  <details style="border: 1px solid #eee; padding: 10px; border-radius: 5px;">
    <summary style="color: #9370db; font-weight: bold; cursor: pointer;">چگونه از کلاس‌ها و آی‌دی‌ها در CSS استفاده کنیم؟</summary>
    <p style="margin-top: 10px; color: #555;">
      کلاس‌ها (با نقطه .) و آی‌دی‌ها (با هش #) روش‌هایی برای انتخاب و استایل‌دهی به عناصر خاص در HTML با استفاده از CSS هستند. کلاس‌ها را می‌توان به چندین عنصر اختصاص داد، در حالی که آی‌دی باید منحصر به فرد باشد.
    </p>
  </details>
</div>

در این مثال:

• هر جفت <details> و <summary> یک پرسش و پاسخ رو نشون می‌ده.
• فقط متن داخل <summary> (یعنی خود سوال) به صورت پیش‌فرض دیده می‌شه.
• با کلیک روی سوال، پاراگراف توضیحات (داخل <details>) نمایش داده می‌شه.
• مرورگرها به صورت پیش‌فرض یه فلش یا مثلث کنار <summary> نشون می‌دن که با باز شدن، جهتش عوض می‌شه.

نکات مهم:

• تگ summary اجباری است: اگر تگ <summary> رو داخل <details> نذارید، کل محتوای داخل <details> به صورت پیش‌فرض نمایش داده می‌شه و دیگه خاصیت باز و بسته شدن رو نخواهد داشت.
• قابلیت دسترسی (Accessibility): این تگ‌ها برای افزایش دسترسی‌پذیری عالی هستن، چون به کاربر اجازه می‌دن خودش انتخاب کنه چه اطلاعاتی رو ببینه.
• استایل‌دهی: شما می‌تونید ظاهر این عناصر رو با CSS تغییر بدید، مثلاً استایل فلش کنار <summary> رو عوض کنید یا ظاهر کادر <details> رو تغییر بدید.

تگ‌های <details> و <summary> ابزارهای ساده ولی قدرتمندی برای مدیریت محتوا و بهبود تجربه کاربری هستن. می‌تونید از اون‌ها برای ساخت بخش‌های توضیحی، گالری عکس‌های قابل باز شدن، یا هر جایی که نیاز به مخفی کردن و نمایش محتوا به صورت انتخابی دارید، استفاده کنید.

امیدوارم از این بخش لذت برده باشید! 😊