برای استفاده از همه امکانات سایت باید جاوا اسکریپت مرورگر خود را فعال کنید.

آموزش تگ details در HTML - راهنمای ایجاد توضیحات بیشتر در html

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

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

هر نوع محتوایی شامل متن، لینک، تصویر و را می توان داخل تگ details قرار داد. متن خلاصه یا عنوان درون تگ summary قرار می گیرد و با کلیک روی آن محتوای پنهان شده نمایش داده می شود و با کلیک مجدد محتوا دوباره پنهان می شود.

مثال 1: استفاده از تگ details در حالت عادی بدون استایل

 <details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>


مثال 2 : استایل دادن به تگ details با استفاده از CSS

<html>
<head>
<style>
details summary{
 padding:10px;
 background-color:#eeeeee;
 border:none;
 cursor:pointer;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
details p{
 background-color:#eeeeee;
 padding:10px;
 margin:0;
}
</style>
</head>

<body dir="rtl">
<details>
 <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></details>
</body>
</html>


پشتیبانی مرورگرها

تگ <details> در مرورگرهای کروم 12، فایرفاکس 49، اپرا 15، سافاری 6، اینترنت اکسپلورر / اج 79 به بالا پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی 12 49 15 6 79


ویژگی ها

ویژگی مقدار توضیحات
open open مشخص می کند که جزئیات به صورت پیش فرض قابل مشاهده باشد.


پشتیبانی از ویژگی ها و رویدادهای عمومی

تگ <details> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.


دستورات CSS پیش فرض

معمولا مرورگرها تگ details را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

details {
  display: block;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،
اشتراک گذاری:          
لینک کوتاه:

نظرات نظرات تا اطلاع ثانوی غیر فعال است.