آموزش و يادگيري تگ details در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <details> آشنا مي‌شويم. اين تگ براي ايجاد بخش‌هاي قابل باز و بسته شدن (Expandable/Collapsible) در صفحات وب استفاده مي‌شود.

تگ details در HTML چيست؟

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

مثال ساده از تگ details

<details>
  <summary>مشاهده جزئيات محصول</summary>
  <p>اين محصول داراي ويژگي‌هاي منحصر به فرد و کيفيت بالاست.</p>
</details>

در اين مثال، متن داخل details پنهان است و با کليک روي summary نمايش داده مي‌شود.

ويژگي‌هاي مهم تگ details

ويژگي	توضيح
open	اگر وجود داشته باشد، بخش به صورت پيش‌فرض باز است
class	اعمال استايل CSS به بخش جزئيات
id	شناسه يکتا براي ارجاع يا استايل‌دهي

مثال با استايل CSS

<style>
  details {
    border: 1px solid #2196f3;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
  }
  summary {
    font-weight: bold;
    cursor: pointer;
  }
</style>

<details>
  <summary>مشاهده جزئيات محصول</summary>
  <p>اين محصول داراي ويژگي‌هاي منحصر به فرد و کيفيت بالاست.</p>
</details>