تگ details در html

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

نحوه استفاده از تگ <details>

تگ <details> همراه با تگ <summary> به کار گرفته می‌شود، در واقع اطلاعات مخفی شده درون تگ <details> قرار میگیرند اما عنوان قابل نمایش درون تگ <summary> قرار می‌گیرد، نمونه کد زیر نشان می‌دهد چگونه از این تگ استفاده کنید:

<details>
  <summary>عنوان</summary>
  <p>متن دلخواه</p>
</details>

attribute یا ویژگی‌های قابل استفاده در تگ <details>

تگ details می‌تواند دارای چندین ویژگی یا attribute باشد که استفاده از این ویژگی‌ها اختیاری است.

open

ویژگی open در این تگ برای مشخص کردن اینکه آیا اطلاعات مخفی شده این تگ باید به صورت پیش‌فرض نمایش داده شود یا نه، استفاده می‌شود. در صورتی که این تگ دارای ویژگی open باشد اطلاعات به صورت پیشفرض نمایش داده می‌شوند.

Global Attributes

تگ <details> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

تگ <details> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ details

اکثر مرورگرها تگ <details> را با مقادیر پیش فرض زیر نمایش می دهند:

details{
  display: block;
}
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس