Bootstrap 5 Collapse
-
بنحكي في هذا الدرس عن استخدام Collapse والي بيستخدم لإظهار المحتوى وإخفائه. يتم استخدام Buttons or anchors ك triggers لغاية التبديل واضهار المحتوى. عند تصغير العنصر هذا الامر يودي إلى تحريك الارتفاع من قيمته الحالية إلى 0(يختفي).ويعتبر هذا الامر مفيد عند الحاجه الى إخفاء كمية كبيرة من المحتوى وإظهارها.
نتعرف في البدايه على classes التي تستخدم هنا وهي:
| اسم class | الوظيفة |
| collapse. | اخفاء المحتوى |
| collapsing. | يطبق أثناء الانتقالات |
| collapse.show. | اظهار المحتوى |
نطبق مثال حتى نفهم الموضوع:
<!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 border m-5 ">
<p class="m-2">
<a class="btn btn-danger" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
collapse with href
</a>
<button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
collapse with data-bs-target
</button>
</p>
<div class="collapse m-2" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</body>
</html>
النتيجة:
تمام نفهم الكود وشو عملنا.
في Button الاول : هو عبارة عن anchors طبقنا الكود "data-bs-toggle="collapse عليه الي بيعني ان سيتم اظهار واخفاء المحتوى. وربطنا المحتوى برقم Id الى هو collapseExample عن طريق اضافة الكود "href="#collapseExample
button الثاني : هو عبارة عن button طبقنا عليه الكود "data-bs-toggle="collapse عليه الي بيعني ان سيتم اظهار واخفاء المحتوى. وربطنا المحتوى برقم Id الى هو collapseExample عن طريق اضافة الكود "data-bs-target="#collapseExample
وفي الاخر اضفنا المحتوى داخل <div> وله Id يساوي collapseExample وفي هذا <Div> طبقنا عليه class باسم collapse الي بيعني ان الوضع الافتراضي يكون مخفي.
يعني عندنا طريقتين لاظهار واخفاء المحتوى.
تطبيق Multiple targets
يمكن اظهار واخفاء اكثر من element باستخدام href أو data-bs-target. وبتم هذا الاشي باستخدام multi-collapse. داخل data-bs-target
نطبق المثال التالي حتى نفهم الموضوع:
<!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 border m-5 ">
<p>
<a class="btn btn-danger" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team
</div>
</div>
</div>
</div>
</div>
</body>
</html>
شوف button رقم 3 هو المسؤول عن اظهار وافخاء اكثر من element طبقنا عليه مجموعة classes وربطنا مع element المطلوب اظهاراها واخفاءها.
اترك تعليقك