برچسب <details> HTML

تعریف و استفاده

<details> برچسب‌ها جزئیات دیگری را که کاربر می‌تواند باز و بسته کند، تعریف می‌کنند.

<details> برچسب‌ها معمولاً برای ایجاد ابزارک‌های تعاملی قابل باز و بسته شدن توسط کاربر استفاده می‌شوند. به صورت پیش‌فرض، ابزارک‌ها بسته هستند. هنگام باز شدن، آن‌ها گسترش می‌یابند و محتوای داخل آن‌ها را نمایش می‌دهند.

هر نوع محتوایی می‌تواند در <details> در برچسب.

توضیح:<summary> برچسب با <details> با استفاده از آنها، می‌توان برای جزئیات یک عنوان قابل مشاهده تعیین کرد. هنگامی که کاربر روی عنوان کلیک می‌کند، <details> محتوای تعریف شده.

لطفاً به:

دستورالعمل HTML DOM:اجزای Details

مثال

مثال 1

تعریف جزئیات قابل باز و بسته شدن توسط کاربر:

<details>
  <summary>مرکز آینده جهان (Epcot Center)</summary>
  <p>Epcot پارک موضوعی از اکوایرنامنت والت دیزنی است که دارای جاذبه‌های هیجان‌انگیز، نمایشگاه‌های بین‌المللی، فجرهای جوایزآور و فعالیت‌های فصلی است.</p>
</details>

آزمایش کنید

مثال 2

استفاده از CSS برای تنظیم استایل details و summary:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>مرکز آینده جهان (Epcot Center)</summary>
  <p>Epcot پارک موضوعی از اکوایرنامنت والت دیزنی است که دارای جاذبه‌های هیجان‌انگیز، نمایشگاه‌های بین‌المللی، فجرهای جوایزآور و فعالیت‌های فصلی است.</p>
</details>
</body>
</html>

آزمایش کنید

ویژگی

ویژگی مقدار توضیح
open open تعیین می‌کند که جزئیات باید برای کاربر قابل مشاهده باشد (باز).

ویژگی‌های جهانی

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

ویژگی‌های رویداد

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

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

بیشتر مرورگرها از تنظیمات پیش‌فرض زیر برای نمایش استفاده می‌کنند <details> عنصر:

details {
  display: block;
}

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

اعداد در جدول نشان‌دهنده نسخه‌ای است که این عنصر را به طور کامل پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0