آموزش تگ details در HTML

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

آموزش تگ details در HTML

Free-Learn

تگ Details در HTML

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

Free-Learn

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

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ details با استفاده از CSS

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ details در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۱۲٫۰ ۴۹٫۰ ۱۵٫۰ ۶٫۰ خیر

Free-Learn

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

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامت یعنی در HTML5 اضافه شده است)

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

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ details از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

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

تگ details یک تگ جدید/اضافه شده در HTML5 می باشد.

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

Free-Learn

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

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


Free-Learn