در اين بخش از
دوره آموزش HTML در آموزش دون
، با تگ
<details> آشنا ميشويم. اين تگ براي ايجاد بخشهاي قابل باز و بسته شدن
(Expandable/Collapsible) در صفحات وب استفاده ميشود.
تگ details در HTML چيست؟
تگ <details> به شما اجازه ميدهد محتوا را به صورت مخفي يا جمعشونده ارائه دهيد و کاربر با
کليک روي آن، محتوا را مشاهده يا پنهان کند.
معمولاً همراه با تگ <summary> استفاده ميشود تا عنوان بخش قابل باز شدن مشخص شود.
مثال ساده از تگ details
<details>
<summary>مشاهده جزئيات محصول</summary>
<p>اين محصول داراي ويژگيهاي منحصر به فرد و کيفيت بالاست.</p>
</details>
در اين مثال، متن داخل details پنهان است و با کليک روي summary نمايش داده ميشود.
ويژگيهاي مهم تگ details
| ويژگي | توضيح |
|---|---|
| open | اگر وجود داشته باشد، بخش به صورت پيشفرض باز است |
| class | اعمال استايل CSS به بخش جزئيات |
| id | شناسه يکتا براي ارجاع يا استايلدهي |
مثال با استايل CSS
<style>
details {
border: 1px solid #2196f3;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
summary {
font-weight: bold;
cursor: pointer;
}
</style>
<details>
<summary>مشاهده جزئيات محصول</summary>
<p>اين محصول داراي ويژگيهاي منحصر به فرد و کيفيت بالاست.</p>
</details>
مزاياي استفاده از details
- ايجاد بخشهاي باز و بسته شدني براي بهبود تجربه کاربري.
- کمک به کاهش شلوغي صفحه با مخفي کردن محتواي اضافي.
- امکان استايلدهي مستقل با CSS براي ظاهر زيبا.
براي يادگيري کامل نحوه استفاده از تگهاي تعاملي HTML، پيشنهاد ميکنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.
براي مشاهده تمام آموزشهاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.
آموزش قبلي: تگ del در HTML
آموزش بعدي: تگ dfn در HTML






دیدگاه و پرسش