1.

Collapse - Bootstrap

Answer»

With  JavaScript plugins, you can change the visibility of content across your project with the help of collapse.

Example:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>collapse in bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h2>collapse in bootstrap</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Learn bootstrap
</div>
</div>

</body>
</html>
collapseDisplay and hide content whenever needed. <p> <a class="btn btn-primary" data-toggle="collapse" href="#expandcollapse" aria-expanded="false" aria-controls="expandcollapse"> Collapse in bootstrap</a></p><div class="collapse" id="expandcollapse"> <div class="card card-body"> collapse in bootstrap</div></div>
Accordion bootstrap 4Used to Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#item1">
Item #1 </a> </div> <div id="item1" class="collapse show" data-parent="#accordion"> <div class="card-body"> text for expand/collapse </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#item2">
Item #2 </a> </div> <div id="item2" class="collapse" data-parent="#accordion"> <div class="card-body"> Collapse in bootstrap </div> </div></div></div>


Discussion

No Comment Found

Related InterviewSolutions