۱۳۹۶/۰۳/۲۶

حتما پیش آمده که برای استفاده از قابلیت نمایش و مخفی کردن یک عنصر در صفحه وب، از جاوااسکریپت استفاده کنید. اما در اینجا با معرفی دو برچسب از html5 اینکار را بدون استفاده از دستورات جاوااسکریپت انجام خواهیم داد!

  1. details
  2. summary

برچسب details

برچسب دوطرفه details در برگیرنده محتوای مخفی شده است.

برچسب summary

برچسب summary موجود در detail امکان نمایش عنوان عنصر مخفی شده را برعهده می گیرد.

مثال: برای اینکار ابتدا برچسب دوطرفه details، سپس عنوان عنصر برای نمایش یا مخفی کردن محتوا را در برچسب دوطرفه summary نوشته و در انتها محتوای مورد نظر خود را اضافه می کنیم.

<details>
<summary>
برای نمایش محتوا کلیک کنید.
</summary>
<p>
معرفی برچسبهای details و summary در html
</p>
</details>

خروجی:

با کلیک بر روی عنوان، محتوای مخفی شده نمایش پیدا می کند.

ویژگی open در details

بصورت پیشفرض محتوای درون برچسب details مخفی است. برای تغییر وضعیت آن به نمایش محتوا می توان از ویژگی open در برچسب details بهره برد.

<details open>
<summary>
برای نمایش محتوا کلیک کنید.
</summary>
<p>
معرفی برچسبهای details و summary در html
</p>
</details>

نکته: محتوای درون details صرفا متن نیست! بلکه میتوانید برچسبهای دیگر را نیز مورد استفاده قرار دهید. مانند فرم، تصویر و… حتی میتوانید از details های تودرتو نیز استفاده کنید.

 

مطالب مرتبط