HTMLالوسم <summary>

تعريفه

نستخدم الوسم <summary> مع الوسم <details> على النحو التالي لعرض معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.

<details>
    <summary>visible-content</summary>
    hidden-content
</details>

• مكان الكلمة visible-content نضع المحتوى الذي نريده أن يظهر دائماً أمام المستخدم و الذي يمكنه النقر عليه.
• مكان الكلمة hidden-content نضع المحتوى الذي نريده أن يظهر فقط حين يقوم المستخدم بالنقر على المحتوى الظاهر.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <details>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا باستخدام الوسمين <details> و <summary> لعرض عنوان و معلومات إضافية يستطيع المستخدم إظهارها و إخفائها.

<details>
    <summary>Computer Science</summary>
    <p>Computer Science is the study of computers and computational systems.
    Unlike electrical and computer engineers, computer scientists deal 
    mostly with software and software systems; this includes their theory,
    design, development, and application.</p>
</details>

في المثال التالي قمنا بإضافة الخاصية open للوسم <details> لجعل محتواه ظاهراً بشكل إفتراضي عندما تفتح الصفحة.

<details open>
    ...
</details>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

summary {
    display: block;
}

نصائح و ملاحظات

يمكنك وضع أي شيء تريده بداخل الوسم <details> مثل رابط، صورة أو صورة صغيرة كأيقونة بجانب النص الذي ستظهره فيه.
و يمكنك تعديل تصميمه بواسطة كود CSS ليظهر بشكل أفضل.

في المثال التالي قمنا بتحسين تصميم الوسوم الموضعة بداخل الوسم <details> بواسطة كود CSS.

details > summary {
    padding: 4px;
    width: 200px;
    background-color: #eeeeee;
    border: none;
    box-shadow: 1px 1px 2px #bbbbbb;
    cursor: pointer;
}
details > p {
    background-color: #eeeeee;
    padding: 4px;
    margin: 0;
    box-shadow: 1px 1px 2px #bbbbbb;
}

في المثال التالي قمنا بتحسين تصميم الوسم <details> بالإضافة إلى الوسوم الموضعة بداخله بواسطة كود CSS.

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 10px 10px 0;
}
summary {
    font-weight: bold;
    margin: -10px -10px 0;
    padding: 10px;
    cursor: pointer;
}
details[open] {
    padding: 10px;
}
details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}