HTML summary Tag

HTML summary Tag – يحدد وسم <summary> ملخصًا أو تسمية توضيحية أو وسيلة إيضاح لعنصر <details>. يمكن النقر فوق العنوان لعرض وإخفاء التفاصيل.

HTML summary Tag

مثال للتوضيح

شغل إيدك

إستخدام وسم <summary> لتحديد تسمية توضيحية لوسم <details>:

How do you manage your time?

Set goals
Set a deadline for each goal
Write down everything you want to do daily
Take breaks

<details>
<summary>How do you manage your time?</summary>
    <ul>
        <li>Set goals</li>
        <li>Set a deadline for each goal</li>
        <li>Write down everything you want to do daily</li>
        <li>Take breaks</li>
    </ul>    
</details>

How do you manage your time?

Set goals
Set a deadline for each goal
Write down everything you want to do daily
Take breaks

يجب أن يكون الوسم <summary> أول عنصر فرعي لوسم <details>.

عندما ينقر المستخدم على عنصر <summary>، يتم تبديل العنصر الرئيسي <details> إلى الفتح أو الإغلاق ، ثم يتم إرسال حدث التبديل إلى عنصر <details> ، والذي يمكن استخدامه لإعلامك بوقت حدوث هذا التغيير في الحالة.