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;
}
		

جرب الكود