آموزش HTML – تگ details

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/12/31 | بخش : آموزش HTML

تعریف و کاربرد تگ details در HTML

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

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

 

نکات و توضیحات

  • تگ details یک تگ جدید/اضافه شده در HTML5 می باشد.
  • با استفاده از تگ summary می توان عنوان (یک عنوان که به کاربر نمایش داده شود) را مشخص کرد، و با کلیک بروی آن می توان محتوای مخفی شده را نمایش داد و برعکس با کلیک دوباره بروی آن می توان محتوا را مخفی نمود.

 

مثال از تگ details در HTML

<details>
  <summary>روی من کلیک کن</summary>
  <p>این یک پیام مخفی شده است</p>
  <p>که با کلیک روی متن به نمایش در می آید</p>
</details> 

تمرین کنید !

پشتیبانی مرورگرها از تگ details در HTML

Element
<details> ۱۲٫۰ ۴۹٫۰ پشتیبانی نمی کند  ۶٫۰ ۱۵٫۰

 

جدول صفات تگ details در HTML

نام صفت  مقدار توضیح
open open مشخص می کند که محتوا بصورت پیش فرض نمایش داده شود.