طريقة عمل تبويبات اكورديون بإستخدام HTML , CSS فقط

 إضافة تبويبات الأكورديون من الإضافات التي تسهل كثيراً التعامل مع المواضيع الطويلة ومناسبه للصفحات التي تحتوي أسئلة وأجوبة

في العادة يتم الإعتماد على تلك الإضافات بإستخدام جافا سكريبت ومكتبات جيكويري وذلك لإعطائها مزايا أكثر لكن الحقيقة معظم تلك المزايا ليست ضرورية ولا تستحق الأكواد الإضافية إلا في حالات قليلة واستخدامها كلها داخل اللمواضيع يكون صعب مع الجافا سكريبت والمكتبات 

لذلك لكي يكون استخدامها داخل المواضيع والصفحات اسهل يفضل أن نتعامل مع نسخ مخففه منها وهي نسخة تعمل بإستخدام لغات HTML , CSS فقط ويمكنك أيضاً استخدامها داخل أدوات HTML/JavaScript

أضف هذا الكود داخل موضوع أو صفحة  أو الإضافة في المكان الذي يعجبك طبعا بعد جعل الموضوع في وضع HTML

<style>

.CNMUAccordion{border-radius:8px;overflow:hidden;box-sizing:border-box;margin: 15px 0;}

.CNMUAccordion *{box-sizing:border-box;transition:all .4s ease}

.AccordT{width:100%;overflow:hidden}

.AccordT input{position:absolute;opacity:0;z-index:-1}

.AccordT label{display:block;padding:15px 15px 15px 40px;background:#2c7b64;color:#fff;cursor:pointer;position:relative;text-align:right;border-bottom:1px solid rgba(255,255,255,.1)}

.AccordT label::after{content:"\276F";text-align:center;transition:all .35s;position:absolute;padding:15px;left:0;top:0;font-size:18px;direction: rtl;}

.AccordC{max-height:0;padding:0 15px;text-align:right;overflow:hidden;background-color:#f8f8f8;color:#222;box-shadow:0 0 1px #ddd inset}

.AccordT label:hover,.AccordT input:checked + label{box-shadow: 0 200px 0 200px rgba(255,255,255,.1) inset;}

.AccordT input:checked + label::after{transform:rotate(-90deg)}

.AccordT input:checked ~ .AccordC{max-height:100vh;padding:15px}

.AccordT .AccordX::after{content:"\2716" !important;transform: none !important;}

.AccordT #AccordX:checked + label{box-shadow:none;}

</style>

<div class="CNMUAccordion">

<!--الخانة الاولى-->

<div class="AccordT">

<input id="Acr1" name="accord"  type="radio" >

<label  for="Acr1">عنوان الخانة الأولى</label>

<div class="AccordC">

محتوى الخانة الأولى  

</div>

</div>

<!--الخانة الاولى-->

<!--الخانة الثانية-->

<div class="AccordT">

<input id="Acr2" name="accord"  type="radio" >

<label  for="Acr2">عنوان الخانة الثانية</label>

<div class="AccordC">

محتوى الخانة الثانية

</div>

</div>

<!--الخانة الثانية-->

  

  

<!--زر إغلاق الكل-->

<div class="AccordT">

<input id="AccordX" name="accord" type="radio">

<label for="AccordX" class="AccordX">إغلاق الكل</label>

</div>

<!--زر إغلاق الكل-->

  

</div>

هذا اللون #2c7b64 هو لون عناوين الخانات وهذا هو لون خط العناوين #fff 

هذا لون منطقة المحتوى #f8f8f8 وهذا هو لون الخط فيها #222 

استخدام الآداة 

الإستخدام بسيط عدل الكلمات العربية بما تريد

وستلاحظ الكود 

<!--الخانة الاولى-->

انسخه من بدايته لنهايته وكرره للحصول على خانة جديدة كما تلاحظ انا مكرره مرة في الخانة الثانية لترى الفكرة هناك متغير واحد فقط عليك تغييره في الكود عند تكراره وهو الرقم 1 ستجد انني في الخانة الثانية جعلته 2 نفس الأمر لو انشأت ثالثة رابعة غيره

خانة إغلاق الكل يمكنك أن تزيل الكود الخاص بها ان لم تكن تريدها

ملحوظة مهمة

ان توقفت الآداة ولم تعد تعمل هذا بسبب أنك بعد ما اضفت الكود عدلت على الموضوع وحولت نمط التدوين الى وضع الإنشاء هنا بلوجر تقوم بحذف الوسم for="Acr1" من على كل الخانات لهذا يتوقف فإما انت تعيد الوسم او تركب الكود من جديد لذلك يفضل ان تجعل الكود آخر شئ تضيفه في الموضوع حتى لا تحتاج التحويل لوضع الإنشاء ويتلف منك

وهذه معاينة للآداة

كيف تنشئ مدونة على بلوجر ؟

مرحباً بك في كن مدون

www.cnmu.info

كيف تركب قالب على مدونتك؟

محتوى الخانة الثانية

كيف تكتب تدوينة بطريقة صحيحة؟

محتوى الخانة الثانية

إغلاق الكل

تعديل