تگ details در HTML

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

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

تگ details چیست؟

تگ details که ترجمه آن به زبان فارسی جزئیات می شود برای ساخت جعبه محتوا همراه با عنوان و توضیحات به کار می رود.

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

این تگ با <details> شروع و با </details> پایان می یابد.

<details>Text</details>

عنوان تگ details

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

در صورتی که از این تگ استفاده نکنید عنوان پیش فرض که Details می باشد انتخاب خواهد شد.

<details>
  <summary>عنوان</summary>
  <p>متن</p>
</details>

اجرا

صفت open در تگ details

با استفاده از این صفت می توان به صورت پیش فرض جزئیات را بدون کلیک کاربر نمایش داد.

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

<details open>Text</details>

اجرا

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ details در اکثر مرورگرها به صورت زیر است:

details {
  display: block;
}

سازگاری با مرورگرها

تگ details با مرورگرهای زیر سازگار است:

• گوگل کروم نسخه 12 و بالاتر
• فایرفاکس نسخه 49 و بالاتر
• اج نسخه 79 و بالاتر
• اپرا نسخه 15 و بالاتر
• سافاری نسخه 6 و بالاتر
• گوگل کروم اندروید
• فایرفاکس اندروید نسخه 49 و بالاتر
• اپرا اندروید نسخه 14 و بالاتر
• سافاری iOS نسخه 6 و بالاتر