Collapse and Accordion Plugin tutorial in Bootstrap CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Collapse Accordion Plugin Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Collapse_Accordion_Plugin_Bootstrap_CSS.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
<script>
$(function () {
$("#newBtn").click(function () {
$("#newCollapse").collapse("show");
});
$("#closeBtn").click(function () {
$("#newCollapse").collapse("hide");
});
$("#toggleBtn").click(function () {
$("#newCollapse").collapse("toggle");
});
$("#newCollapse").on("show.bs.collapse", function () {
alert("Show");
});
$("#newCollapse").on("hide.bs.collapse", function () {
alert("Hide");
});
$("#newCollapse").on("hidden.bs.collapse", function () {
alert("Hidden");
});
});
</script>
</head>
<body>
<!--How to make Website Layout with Bootstrap ?-->
<!--3 Bootstrap CSS Classes : Container, Row, Col-->
<!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
<!--Total width of Grid in Every row is 12-->
<!--Col Class for different Break Points-->
<!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
<!--Total width of Column Grid must be maximum 12 in one Row-->
<div class="container">
<h2 class="py-3 text-center">Bootstrap Collapse & Accordion</h2>
<div class="row py-3 justify-content-center">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" 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" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Accordion Item 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<!--<div class="col-md-7 py-3">
<button id="newBtn" class="btn btn-primary">Open</button>
<button id="closeBtn" class="btn btn-primary">Close</button>
<button id="toggleBtn" class="btn btn-primary">Toggle</button>
<div id="newCollapse" class="collapse">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium maiores eveniet voluptates
quo cum libero provident harum quos ea est!
</div>
</div>
</div>
<div class="col-md-7">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<button class="btn btn-link btn-block text-left" data-toggle="collapse"
data-target="#collapseOne">Heading Number One</button>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis vitae quibusdam
consectetur sequi aspernatur nemo doloribus consequuntur ipsum repudiandae natus!
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="btn btn-link btn-block text-left collapsed" data-toggle="collapse"
data-target="#collapseTwo">Heading Number Two</button>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, praesentium iure enim
sapiente nihil facilis excepturi assumenda ab ipsam dolor?
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="btn btn-link btn-block text-left collapsed" data-toggle="collapse"
data-target="#collapseThree">Heading Number Three</button>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum eum, fugiat quae
perspiciatis quia cumque! Laborum vitae labore debitis cumque!
</div>
</div>
</div>
</div>-->
<!--<button class="btn btn-primary mb-2" data-bs-toggle="collapse"
data-bs-target=".multi-collapse">Click</button>
<a href="#collapseExample" class="btn btn-success mb-2" data-bs-toggle="collapse" role="button"
aria-expanded="false" aria-controls="collapseExample" data-bs-target=".multi-collapse">Anchor
Click</a>
<div id="collapseExample" class="collapse multi-collapse">
<div class="card card-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique error blanditiis voluptas
ipsam nostrum aspernatur expedita doloribus ipsa maxime cum.
</div>
</div>
<div id="collapseExample" class="collapse multi-collapse">
<div class="card card-body">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum illum at obcaecati similique
quia, neque maxime reprehenderit dicta iste sed.
</div>
</div>-->
</div>
</div>
</div>
</body>
</html>
Below File is css/Collapse_Accordion_Plugin_Bootstrap_CSS.css File
.accordion .btn {
background: #008000;
color: #ffffff;
}
.accordion .btn.collapsed {
background: #ff0000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment