Bootstrap 5 Accordion
-
بنتعلم في هذا الدرس شو يعني Accordion، وشو هي استخداماتها. ويمكن تعريفها على انها محتوى يتم عرضه بالصفحة حسب الطلب. يعني ممكن نقسم المحتوى الى اقسام فوق بعض وبنظهر المحتوى حسب الطلب.
تمام نفهم الموضوع بمثال:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button bt-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</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">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</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">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</div>
</div>
</div>
</div>
</div>
</body>
</html>
النتيجة:
نفهم الكود
اضفنا <Div> وطبقنا عليها class باسم accordion واعطينا Id الو يساوي accordionExample يمثل هذا <div> الحاوية لكل المحتوى.
<div class="accordion" id="accordionExample">
بعد هيك بنعمل اضافة Items عن طريق اضافة <div> وتطبيق class عليها باسم accordion-item وداخل هذا <div> بنضيف المحتوى المطلوب.
<div class="accordion-item">
المحتوى بتكون من Header الى اضفنا عن طريق اضافة h2 وطبقنا عليها class باسم accordion-header واعطناها ID يساوي headingOne. داخلها اضفنا button الي من خلالو بتم اظهار واخفاء المحتوى عند النقر فوقه. في هذا button اضفنا الكود الي تعلمناه سابقا وهو
data-bs-toggle="collapse" data-bs-target="#collapseOne"
بهدف ربط هذا button مع المحتوى المطلوب عرضه.
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button bt-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
في المحتوي اضفنا class باسم Show الي بيعني ان هذا المحتوي بكون الوضع الافتراضي الو ظاهر.
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</div>
</div>
حاول تحذف هذا class المسمى Show وشوف النتيجة بتكون كل المحتوي في الوضع الافتراضي مخفي.
الكود المسؤول عن اخفاء بقية المحتوي واظهار المحتوي المطلوب فقط هو :
data-bs-parent="#accordionExample"
اضافة Flush
يمكن تغيير شكل وخصائص accordions مثل لون الخلفية، الحدود، الزوايا background-color, some borders, rounded corners باستخدام class باسم accordion-flush.
بنعدل الكود السابق الى :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-5 ">
<div class="accordion accordion-flush" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button bt-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</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">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</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">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Devkum Tem.</strong>
Welcome to our website, this is example of Accordion Item,Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item, Welcome to our website, this is example of Accordion Item
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ابقاء جميع المحتوي مفتوح Always open
يمكن ابقاء المحتوى الحالي مفتوح وفتح محتوى اخر (ابقاء جميع المحتوى مفتوح). عن طريق حذف الكود data-bs-parent
اترك تعليقك