تگ details در html
تگ details یک عنصر با قابلیت جمع شدن (collapsible) است. این تگ به صورت پیشفرض یک بخش از اطلاعات را به غیر از عنوان مخفی میکند، زمانی که کاربر روی عنوان که با تگ <summary>
تعریف میشود کلیک میکند، بخش مخفی شده نمایش داده میشود.
- نحوه استفاده از تگ <details>
- attribute یا ویژگیهای قابل استفاده در تگ <details>
- open
- Global Attributes
- Event Attributes
نحوه استفاده از تگ <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;
}
آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
پروژه محور - ارتباط مستقیم با مدرس