شرح العنصر details في html

العنصر <details> في HTML: دليل شامل

HTML

مقدمة عن عنصر <details>

العنصر <details> هو أحد عناصر HTML5 الذي يُستخدم لإنشاء واجهة مستخدم قابلة للطي (toggleable)، حيث يمكن للمستخدمين عرض أو إخفاء محتوى إضافي حسب حاجتهم. هذا العنصر مفيد بشكل خاص عندما تريد تقديم معلومات إضافية دون إرباك الصفحة بمحتوى غير ضروري للوهلة الأولى.

البنية الأساسية للعنصر

<details>
  <summary>عنوان القسم القابل للطي</summary>
  <p>هذا هو المحتوى الذي سيظهر عند النقر على العنوان.</p>
</details>

المكونات الرئيسية

• <details>: العنصر الرئيسي الذي يحتوي على المحتوى القابل للطي.
• <summary>: العنصر الذي يعرض عنوان أو ملخص المحتوى (مطلوب كعنصر فرعي أول).

فوائد استخدام <details>

1. تحسين تجربة المستخدم: يسمح للمستخدمين بالتحكم في كمية المعلومات المعروضة.
2. توفير المساحة: يساعد في الحفاظ على نظافة الصفحة وتنظيمها.
3. بديل خفيف للجافاسكريبت: لا يحتاج إلى أي شفرات جافاسكريبت ليعمل.
4. تحسين الأداء: تحميل المحتوى المخفي فقط عند الطلب.
5. إمكانية الوصول: يدعم بشكل جيد تقنيات المساعدة مثل قارئات الشاشة.

كيفية عمل العنصر

الحالة الافتراضية

<details>
  <summary>معلومات إضافية</summary>
  <p>هذه المعلومات ستظهر عند النقر على العنوان.</p>
</details>

الحالة المفتوحة افتراضيًا

<details open>
  <summary>معلومات إضافية</summary>
  <p>هذه المعلومات مرئية منذ البداية.</p>
</details>

استخدامات عملية للعنصر

الأسئلة الشائعة (FAQ)

<details>
  <summary>كيف يمكنني استعادة كلمة المرور؟</summary>
  <p>يمكنك النقر على رابط "نسيت كلمة المرور" وإدخال بريدك الإلكتروني...</p>
</details>

الشروحات التفصيلية

<details>
  <summary>خطوات التثبيت</summary>
  <ol>
    <li>قم بتنزيل البرنامج</li>
    <li>افتح الملف التنفيذي</li>
    <li>اتبع التعليمات</li>
  </ol>
</details>

إخفاء الأكواد البرمجية الطويلة

<details>
  <summary>عرض الكود البرمجي</summary>
  <pre><code>function example() {
  console.log("Hello World!");
}</code></pre>
</details>

الاختبارات الذاتية

<details>
  <summary>عرض الإجابة</summary>
  <p>الجواب الصحيح هو: 42</p>
</details>

التخصيص باستخدام CSS

يمكنك تخصيص مظهر العنصر باستخدام CSS:

details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  margin-bottom: 10px;
  color: #0066cc;
}

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

يدعم العنصر <details> في جميع المتصفحات الحديثة بما في ذلك:

• Chrome 12+
• Firefox 49+
• Safari 6+
• Edge 79+
• Opera 15+

النصائح والممارسات الجيدة

1. استخدم عناوين واضحة في <details>: تساعد المستخدمين على فهم المحتوى المخفي.
2. لا تضع محتوى حيوي داخل <details>: المعلومات المهمة يجب أن تكون مرئية دائمًا.
3. استخدم العنصر بشكل معقول: الإفراط في استخدامه قد يجعل الصفحة صعبة الاستخدام.
4. فكر في تجربة المستخدم على الجوال: العنصر يعمل جيدًا مع اللمس.
5. اختبار إمكانية الوصول: تأكد من عمل العنصر مع قارئات الشاشة.

التفاعل مع JavaScript

يمكنك التحكم في العنصر باستخدام JavaScript:

// الحصول على عنصر details
const detailsElement = document.querySelector('details');

// فتح العنصر
detailsElement.open = true;

// إضافة مستمع للأحداث
detailsElement.addEventListener('toggle', function() {
  if (this.open) {
    console.log('تم فتح العنصر');
  } else {
    console.log('تم إغلاق العنصر');
  }
});

أمثلة متقدمة

مجموعة من عناصر details

<div class="faq-div">
  <h5>الأسئلة الشائعة</h5>
  <details>
    <summary>كيف يمكنني إنشاء حساب؟</summary>
    <p>اضغط على زر "تسجيل" في أعلى الصفحة...</p>
  </details>
  <details>
    <summary>ما هي وسائل الدفع المتاحة؟</summary>
    <p>نحن نقبل البطاقات الائتمانية وبايبال...</p>
  </details>
</div>

تصميم مخصص مع أيقونات

<style>
  details summary::-webkit-details-marker {
    display: none;
  }
  details summary:before {
    content: "+";
    margin-right: 8px;
  }
  details[open] summary:before {
    content: "-";
  }
</style>

<details>
  <summary>أسئلة حول الشحن</summary>
  <p>مدة الشحن عادةً من 3 إلى 5 أيام عمل...</p>
</details>

الخلاصــة

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

كيف كان المقال؟