عنصر القائمة القابلة للطي

أقسام قابلة للتوسيع لإبقاء الرسائل الطويلة سهلة التصفّح — الأسئلة الشائعة، وتفاصيل الطلبات، والشروط — دون إجبار كل مستلم على قراءتها كلها سواء احتاج إليها أم لا.

آلية العمل

تستخدم الرسالة المُرسَلة والعرض المباشر المستضاف عمدًا طريقتي تنفيذ مختلفتين، لا شجرة ترميز واحدة مشتركة. ففي العرض المباشر، وهو متصفح حقيقي، يكون كل بند عنصر <details>/<summary> أصليًا. وهذا أيسر وصولًا من خدعة CSS: إذ يمكن تشغيله بلوحة المفاتيح، ويحمل علامة إفصاح أصلية، ويعمل مع قارئات الشاشة مباشرة، فلا سبب للتخلي عن ذلك لمجرد مشاركة الشيفرة مع عارض البريد.

أما في HTML المُرسَل، فدعم <details> غير متّسق بين تطبيقات البريد، لذا يستخدم كل بند بدلًا من ذلك تقنية :checked نفسها القائمة على مربع اختيار مخفي وتسمية، التي يستخدمها عنصرا العرض الدوّار وبطاقة الكشط. أي مربع اختيار مخفي، وعنصر <label> منسّق ليكون العنوان القابل للنقر، وعنصر <div> للمحتوى يبقى display:none حتى يُحدَّد مربع الاختيار الخاص به. وعندها تكشفه قاعدة #item-id:checked ~ .acc-content{display:block}. ويُطوى كل بند ويُوسَّع باستقلال؛ ولا يوجد سلوك «بند واحد مفتوح فقط في كل مرة».

وحيثما لا تُحترم تقنية CSS هذه (محرك Word في Outlook، أو تطبيق بريد يحذف عناصر <style>)، لا يكون البديل رابطًا إلى مكان آخر — بل أكثر الافتراضات أمانًا: يُعرض كل بند موسَّعًا مسبقًا. فلا يُخفى شيء أبدًا خلف إيماءة لا يستطيع تطبيق البريد أداءها، ويرى المستلم في تطبيق بريد محدود القدرات الأسئلة الشائعة كاملة أو تفاصيل الطلب كاملة منذ البداية، فقط دون إمكانية الطي والتوسيع. وهذا يعكس نمط «الافتراض الآمن» نفسه الذي يستخدمه عنصر بطاقة الكشط لكشف جائزته.

الحقول القابلة للضبط:

• لون الخلفية، والحشو، والحد (العرض/النمط/اللون)، واستدارة الزوايا — تُطبَّق على البطاقة الخارجية للقائمة القابلة للطي، وتتشاركها كل البنود.

يحمل كل بند قائمة قابلة للطي (عنصر فرعي يُضاف ويُعاد ترتيبه باستقلال):

• العنوان — نص الترويسة الظاهر دائمًا، القابل للنقر للتوسيع/الطي.
• المحتوى — النص الأساسي الذي يُكشف تحته، ويُعرض مع الحفاظ على فواصل الأسطر.
• لون العنوان/حجم خط العنوان ولون المحتوى/حجم خط المحتوى مستقلة لكل بند، ليتميّز تحذير أو سؤال شائع مُبرَز عن جيرانه.

القائمة القابلة للطي محتوى خالص، مثل عنصر النص أو الصورة — فتوسيع بند ليس حدث تفاعل. لا يُسجَّل شيء عن البنود التي فتحها المستلم، ولا يظهر العنصر أبدًا في لوحة الردود، ولا في تصدير CSV، ولا في Webhook المشروع.

أمثلة

قسم للأسئلة الشائعة في أسفل رسالة إطلاق منتج أو رسالة ترحيب بمستخدم جديد يُبقي الرسالة الرئيسية قصيرة مع الإجابة عن الأسئلة الخمسة التي يطرحها الجميع. فمن لا يحتاج إلى التفاصيل لا يراها موسَّعة أبدًا، ومن يحتاج إليها يحصل رغم ذلك على بديل موسَّع كامل إن لم يستطع تطبيق بريده طيّها أصلًا. ويمكن لرسالة تأكيد طلب أن تطوي تفاصيل الشحن وسياسة الإرجاع والتسعير المفصّل في ثلاثة أقسام مطويّة بدلًا من جدار من النص. ويمكن لملخّص نشرة إخبارية استخدام بند واحد لكل خبر، مع العنوان الرئيسي عنوانًا للبند وملخّص من جملتين محتوىً له، ليتصفح المستلمون العناوين ويوسّعوا ما يهمّهم فقط.

كيف يبدو البديل الثابت

<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
  <label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
    Do you offer refunds?
  </label>
  <div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
    Yes — within 30 days of purchase, no questions asked.
  </div>
</div>

أُغفل هنا مربع الاختيار المخفي وقاعدة النمط :checked الخاصة به لأنهما مغلَّفان في مستوى حركي فقط — ففي تطبيق بريد يتخطاهما، لا توجد قاعدة تُخفي .acc-content، فيُعرض موسَّعًا افتراضيًا تمامًا كما يظهر هنا.

انظر أيضًا

• نظرة عامة على مرجع العناصر
• كيف تعمل البدائل