آموزش تگ details در HTML - راهنمای ایجاد توضیحات بیشتر در html

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

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

هر نوع محتوایی شامل متن، لینک، تصویر و را می توان داخل تگ details قرار داد. متن خلاصه یا عنوان درون تگ summary قرار می گیرد و با کلیک روی آن محتوای پنهان شده نمایش داده می شود و با کلیک مجدد محتوا دوباره پنهان می شود.

مثال 1: استفاده از تگ details در حالت عادی بدون استایل

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

مثال 2 : استایل دادن به تگ details با استفاده از CSS

<html>
<head>
<style>
details summary{
padding:10px;
background-color:#eeeeee;
border:none;
cursor:pointer;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
details p{
background-color:#eeeeee;
padding:10px;
margin:0;
}
</style>
</head>

<body dir="rtl">
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></details>
</body>
</html>