الأكورديونات

<div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> عنصر أكورديون #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا جسم أكورديون العنصر الأول.</strong> يتم عرضه افتراضيًا مع فئة <code>.show</code>، حتى يضيف مكون الطي الفئات المناسبة. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> عنصر أكورديون #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا جسم أكورديون العنصر الثاني.</strong> يتم إخفاؤه افتراضيًا، حتى يضيف مكون الطي الفئات المناسبة. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> عنصر أكورديون #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا جسم أكورديون العنصر الثالث.</strong> يتم إخفاؤه افتراضيًا، حتى يضيف مكون الطي الفئات المناسبة. </div> </div> </div> </div>

<div class="accordion" id="accordionPanelsStayOpenExample"> <div class="accordion-item"> <h2 class="accordion-header" id="panelsStayOpen-headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne"> عنصر أكورديون #1 </button> </h2> <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne"> <div class="accordion-body"> يبقى هذا العنصر مفتوحًا عند فتح الآخرين. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="panelsStayOpen-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"> عنصر أكورديون #2 </button> </h2> <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo"> <div class="accordion-body"> يمكن فتح هذا العنصر في نفس الوقت مع الآخرين. </div> </div> </div> </div>

<div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> عنصر أكورديون مسطح #1 </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> <div class="accordion-body"> هذا الأكورديون ليس له حدود أو ألوان خلفية. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> عنصر أكورديون مسطح #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> <div class="accordion-body"> مثالي للوضع داخل البطاقات أو الحاويات. </div> </div> </div> </div>

<div class="accordion" id="accordionCustomContent"> <div class="accordion-item"> <h2 class="accordion-header" id="customHeadingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapseOne" aria-expanded="true" aria-controls="customCollapseOne"> مثال محتوى غني </button> </h2> <div id="customCollapseOne" class="accordion-collapse collapse show" aria-labelledby="customHeadingOne" data-bs-parent="#accordionCustomContent"> <div class="accordion-body"> <h5>الميزات:</h5> <ul> <li>ميزة واحدة مع وصف مفصل</li> <li>ميزة اثنتان مع المزيد من المعلومات</li> <li>ميزة ثلاثة مع أمثلة</li> </ul> <img src="image.jpg" class="img-fluid mb-3" alt="مثال"> <a href="#" class="btn btn-primary">اعرف المزيد</a> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="customHeadingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapseTwo" aria-expanded="false" aria-controls="customCollapseTwo"> مثال جدول </button> </h2> <div id="customCollapseTwo" class="accordion-collapse collapse" aria-labelledby="customHeadingTwo" data-bs-parent="#accordionCustomContent"> <div class="accordion-body"> <table class="table"> <thead> <tr> <th>الاسم</th> <th>القيمة</th> </tr> </thead> <tbody> <tr> <td>عنصر 1</td> <td>قيمة 1</td> </tr> <tr> <td>عنصر 2</td> <td>قيمة 2</td> </tr> </tbody> </table> </div> </div> </div> </div>

<!-- بنية HTML --> <button class="btn btn-primary mb-3" id="toggleAccordion">تبديل العنصر الأول</button> <button class="btn btn-secondary mb-3" id="showAllAccordion">إظهار الكل</button> <button class="btn btn-danger mb-3" id="hideAllAccordion">إخفاء الكل</button> <div class="accordion" id="accordionJS"> <div class="accordion-item"> <h2 class="accordion-header" id="jsHeadingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#jsCollapseOne" aria-expanded="false" aria-controls="jsCollapseOne"> عنصر محكوم #1 </button> </h2> <div id="jsCollapseOne" class="accordion-collapse collapse" aria-labelledby="jsHeadingOne"> <div class="accordion-body"> محتوى يتحكم فيه JavaScript. </div> </div> </div> </div> <script> // تهيئة الأكورديون var collapseOne = document.getElementById('jsCollapseOne'); var bsCollapse = new bootstrap.Collapse(collapseOne, { toggle: false }); // تبديل عنصر واحد document.getElementById('toggleAccordion').addEventListener('click', function() { bsCollapse.toggle(); }); // إظهار العنصر document.getElementById('showAllAccordion').addEventListener('click', function() { bsCollapse.show(); }); // إخفاء العنصر document.getElementById('hideAllAccordion').addEventListener('click', function() { bsCollapse.hide(); }); // الاستماع للأحداث collapseOne.addEventListener('show.bs.collapse', function() { console.log('الأكورديون يفتح'); }); collapseOne.addEventListener('shown.bs.collapse', function() { console.log('الأكورديون مفتوح بالكامل'); }); collapseOne.addEventListener('hide.bs.collapse', function() { console.log('الأكورديون يُغلق'); }); collapseOne.addEventListener('hidden.bs.collapse', function() { console.log('الأكورديون مغلق بالكامل'); }); </script>

// الحصول على عنصر الأكورديون var myCollapse = document.getElementById('myAccordion'); // إنشاء مثيل var collapse = new bootstrap.Collapse(myCollapse, { toggle: false, // عدم التبديل عند التهيئة parent: '#accordionParent' // محدد الأب }); // الطرق collapse.toggle(); // تبديل الرؤية collapse.show(); // إظهار الأكورديون collapse.hide(); // إخفاء الأكورديون collapse.dispose(); // تدمير مثيل الأكورديون // الحصول أو إنشاء مثيل var instance = bootstrap.Collapse.getInstance(myCollapse); var getOrCreate = bootstrap.Collapse.getOrCreateInstance(myCollapse);

<div class="accordion" id="accordionParent"> <div class="accordion-item"> <h2 class="accordion-header" id="parentHeading"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#parentCollapse"> عنصر الأب </button> </h2> <div id="parentCollapse" class="accordion-collapse collapse show" data-bs-parent="#accordionParent"> <div class="accordion-body"> <!-- أكورديون متداخل --> <div class="accordion" id="accordionChild"> <div class="accordion-item"> <h2 class="accordion-header" id="childHeading1"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse1"> عنصر فرعي #1 </button> </h2> <div id="childCollapse1" class="accordion-collapse collapse" data-bs-parent="#accordionChild"> <div class="accordion-body"> محتوى متداخل هنا. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="childHeading2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse2"> عنصر فرعي #2 </button> </h2> <div id="childCollapse2" class="accordion-collapse collapse" data-bs-parent="#accordionChild"> <div class="accordion-body"> المزيد من المحتوى المتداخل. </div> </div> </div> </div> </div> </div> </div> </div>