استخدام أداة الأكورديون في قالب اقرأ

لقد قمنا في قالب اقرأ بتوفير أداة أكورديون رائعة من حيث التصميم، وسهلة من حيث الاستخدام.

ويمكن استخدامها لعرض أنواع عديدة من المحتوى حسب رغبتك، وإن كان يُستخدم غالباً لعرض الأسئلة الشائعة.

ويمكن استخدام عدد لا نهائي من الأكورديون في الصفحة أو المقال، ويتم عرض الجواب أو النص المخفي بالضغط على السؤال أو النص الظاهر.

تضمين الأكورديون في الصفحة أو المقال

كود البنية الأساسية للأداة:

<div class="accordion">ضع هنا أكواد الأسئلة بالعدد الذي تريد</div> -كود html-

ولإضافة أسئلة للجسم الأساسي للأداة قم بتضمين كود السؤال التالي مع إجراء التعديلات المناسبة:

<div class="acc-item"><div class="acc-header">نص السؤال</div><div class="acc-body"><div class="acc-content">نص الجواب</div></div></div>-كود html-

كل ما عليك فعله هو تبديل "نص السؤال" و "نص الجواب" بالنص الذي تريده، ثم كرر إضافة كود الأسئلة بالعدد الذي تريد.

قد يبدو شكل الكود النهائي بعد إضافة ثلاثة أسئلة مثلاً مع أجوبتها على الشكل التالي:

<div class="accordion">
<div class="acc-item"><div class="acc-header">
هذا سؤال تجريبي لعرض الأكورديون 1؟
</div><div class="acc-body"><div class="acc-content">
هذا مثال لنص تجريبي يمكن أن يستبدل في نفس المساحة تم توليده لمعاينة قالب اقرأ.
</div></div></div>
<div class="acc-item"><div class="acc-header">
هذا سؤال تجريبي لعرض الأكورديون 2؟
</div><div class="acc-body"><div class="acc-content">
هذا مثال لنص تجريبي يمكن أن يستبدل في نفس المساحة تم توليده لمعاينة قالب اقرأ.
</div></div></div>
<div class="acc-item"><div class="acc-header">
هذا سؤال تجريبي لعرض الأكورديون 3؟
</div><div class="acc-body"><div class="acc-content">
هذا مثال لنص تجريبي يمكن أن يستبدل في نفس المساحة تم توليده لمعاينة قالب اقرأ.
</div></div></div>
</div> -كود html-

استخدام أداة الأكورديون في الشريط الجانبي

يمكن استخدام أداة الأكورديون في الشريط الجانبي والشريط السفلي (الفوتر) أيضاً لعرض المحتوى الذي ترغب به. 

ولعمل ذلك قم باتباع الخطوات التالية:

منصة بلوجر --> التنسيق --> إضافة أداة (في المكان الذي ترغب فيه) --> HTML/JavaScript

ثم قم بإضافة العنوان الذي تريد للأداة، أو يمكنك أن تتركها بدون عنوان.

ثم قم بنسخ الأكواد الموجودة في الأعلى في حقل المحتوى ثم أضغط على حفظ.

فيديو شرح طريقة استخدام الأكورديون في قالب اقرأ

LlmWV9O9lgo-تضمين فيديو-