تبويبات أكورديون HTML CSS JavaScript

تبويبات أكورديون HTML CSS JavaScript

المعاينات والمرفقات

 ما هي إضافة أكورديون Accordion؟

هي إضافة مأخوذ اسمها من أحد الأدوات الموسيقية التي تعتمد على الطي , فيتم طي وفرد الآداة ومن هناك جاء الإسم

الإضافة تعبر عن متوى مطوي يتم فيه عرض عنوان المحتوى فقط ثم عند الضغط يحدث التوسع ويتم عرض باقي المحتوى

تعتبر هذه الآداة مناسبة لكتابة الصفحات التي بها معلومات كشروط الإستخدام , او ان أردت عرض متوى طويل لكن لا يكون ظاهر كله دفعه واحدة كالمحتوى الذي يضاف في السايد بار مثلاً

 

تبويبات أكورديون HTML CSS JavaScript

المميزات والوظائف الرئيسية:

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

التصميم الأنيق والبسيط:

  • واجهة نظيفة: تتميز بخطوط وأنماط ألوان بسيطة (خلفية رمادية فاترة جداً) تتناسب مع معظم التصاميم دون تطغى على المحتوى الأساسي.
  • تفاعلية بصرية: يتغير لون خلفية التبويب عند المرور فوقه (hover) أو عند تفعيله (active)، مما يمنح المستخدم إشارة بصرية واضحة على أنه عنصر قابل للنقر.


الحركات السلسة (Smooth Animations):

  • حركة التوسيع والطي: لا يظهر المحتوى فجأة، بل ينفتح وينغلق بسلاسة بفضل خاصية transition في CSS، مما يخلق تجربة أكثر ديناميكية وحداثة.
  • تأثير التلاشي (Fade): يظهر المحتوى ويتلاشى تدريجياً (opacity) بالتزامن مع حركة الارتفاع، مما يضيف لمسة جمالية واحترافية.


التفاعل الذكي مع المستخدم:


نمط "واحد مفتوح فقط": تمت برمجة الإضافة لفتح تبويب واحد فقط في كل مرة. عند النقر على تبويب جديد، يُغلق التبويب المفتوح سابقاً تلقائياً. هذا يمنع ازدحام الصفحة ويحافظ على تركيز المستخدم على القسم الذي يهمه.

  • إشارات بصرية واضحة: يحتوي كل عنوان على علامة + التي تتحول إلى - عندما يكون القسم مفتوحاً، وهي إشارة بديهية ومعيارية يفهمها المستخدمون على الفور.
  • بنية مرنة: يمكن بسهولة إضافة أو إزالة أي عدد من التبويبات عن طريق نسخ ولصق كتل HTML الأساسية (<h6> و <div>).
  • كود خفيف الوزن: الكود مكتوب بطريقة فعالة، حيث يعتمد على JavaScript نقي (Vanilla JS) دون الحاجة إلى مكتبات خارجية ثقيلة، مما يضمن سرعة في التحميل والأداء.


كيفية الاستخدام؟

قم بلصق الكود الخاصة بالآداة في صفحة أو موضوع أو آداة HTML/Javascript 


<style>
#ba-accordion{display:flex;flex-direction:column;gap:3px;}
#ba-accordion > h6{all:unset;display:flex;justify-content:space-between;background-color:rgba(0,0,0,.02);padding:15px;border:1px solid rgba(0,0,0,.02);border-radius:4px;cursor:pointer;position:relative;}
#ba-accordion > h6.active,#ba-accordion > h6:hover{background-color:rgba(0,0,0,.1);transition:all .4s;}
#ba-accordion h6::after{content:'+';font-weight:bold;font-size:20px;}
#ba-accordion h6.active::after{content:'-';}
#ba-accordion > div{display:block;overflow-y:hidden;max-height:0;opacity:0;transition:max-height .4s,opacity .4s;}
#ba-accordion > div.active{max-height:600px;overflow-y:auto;padding:10px;opacity:1;}
</style>

<div id="ba-accordion">
  
<!--بداية تبويب-->
<h6>اسم التبويب</h6>
<div>
المحتوى 
</div>
<!--نهاية تبويب-->

</div>

<script>
document.addEventListener("DOMContentLoaded",function(){const accordionHeaders=document.querySelectorAll("#ba-accordion h6");accordionHeaders.forEach(header=>{header.addEventListener("click",function(){accordionHeaders.forEach(otherHeader=>{if(otherHeader!==header){otherHeader.classList.remove("active");otherHeader.nextElementSibling.classList.remove("active")}});header.classList.toggle("active");const content=header.nextElementSibling;content.classList.toggle("active");if(!content.classList.contains("active")){content.addEventListener("transitionend",function handler(){content.classList.remove("active");content.removeEventListener("transitionend",handler)})}})})});
</script>

 قم بتكرار كود التبويب من بداية التبويب الى نهاية التبويب لتحصل على واحد جديد

عدل اسم التبويب بما تريد

والمحتوى إضف به ما تشاء يمكنك أن تضيف أى شئ نصوص , صور , تنسيقات الأمر يرجع لك

تعديل

هذا أحدث موضوع

للإستفسار أو شراء المنتج عبر

بايبال أو فودافون كاش

يرجى الطلب عبر النموذج التالي

تعليقات

0

شاركنا برأيك حول الإضافة ,
أو لو لديك اقتراح أو استفسار عنها أو تواجه مشكلة في استخدامها اترك تعليق وسيتم الرد عليك في أقرب وقت.

الاشتراك في: تعليقات الرسالة (Atom)

الصفحات