What is Collapse?
Collapses are UI components that allow content to be hidden or shown dynamically. They are particularly useful for organizing large amounts of information in a compact way, making it easier for users to navigate through your content.
Why Use Collapse?
- Space Management: Collapses help save space on the page by hiding less important information, thus improving layout and readability.
- User Control: Users can expand or collapse sections as needed, allowing them to customize their viewing experience.
- Organized Content: Collapses facilitate the grouping of related information, making it simpler for users to find what they are looking for.
Collaps Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Collaps Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Collapsible 1 with Icon -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseOne">
<i class="icon fas fa-arrow-down"></i>Toggle Section 1
</button>
<div id="collapseOne" class="collapse">
<div class="card card-body">
This is the first collapsible section. Icons can be added to make toggles visually appealing.
</div>
</div>
<!-- Collapsible 2 with Nested Collapsibles -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseTwo">
<i class="icon fas fa-folder"></i>Toggle Section 2 (with Nested Collapsibles)
</button>
<div id="collapseTwo" class="collapse">
<div class="card card-body">
<p>This section contains nested collapsible sections for organizing content hierarchically.</p>
<!-- Nested Collapsible 1 -->
<button class="btn btn-secondary mb-2" data-toggle="collapse" data-target="#nestedCollapseOne">
<i class="icon fas fa-angle-right"></i>Nested Section 1
</button>
<div id="nestedCollapseOne" class="collapse">
<div class="card card-body">
This is a nested collapsible section inside Section 2.
</div>
</div>
<!-- Nested Collapsible 2 -->
<button class="btn btn-secondary mb-2" data-toggle="collapse" data-target="#nestedCollapseTwo">
<i class="icon fas fa-angle-right"></i>Nested Section 2
</button>
<div id="nestedCollapseTwo" class="collapse">
<div class="card card-body">
Another nested collapsible section.
</div>
</div>
</div>
</div>
<!-- Collapsible 3 with a Form -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseThree">
<i class="icon fas fa-edit"></i>Toggle Section 3 (with Form)
</button>
<div id="collapseThree" class="collapse">
<div class="card card-body">
<form>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Collapsible 4 with List -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseFour">
<i class="icon fas fa-list"></i>Toggle Section 4 (with List)
</button>
<div id="collapseFour" class="collapse">
<div class="card card-body">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</div>
<!-- Collapsible 5 with Images -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseFive">
<i class="icon fas fa-image"></i>Toggle Section 5 (with Images)
</button>
<div id="collapseFive" class="collapse">
<div class="card card-body">
<div class="row">
<div class="col-4">
<img src="sea.jpg" class="img-fluid" alt="Placeholder Image 1">
</div>
<div class="col-4">
<img src="sky.jpg" class="img-fluid" alt="Placeholder Image 2">
</div>
<div class="col-4">
<img src="image14jpg.jpg" class="img-fluid" alt="Placeholder Image 3">
</div>
</div>
</div>
</div>
<!-- Collapsible 6 with Table -->
<button class="btn btn-primary mb-2" data-toggle="collapse" data-target="#collapseSix">
<i class="icon fas fa-table"></i>Toggle Section 6 (with Table)
</button>
<div id="collapseSix" class="collapse">
<div class="card card-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Rehan</td>
<td>Syed</td>
<td>@Rehansyed</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Faizan</td>
<td>khan</td>
<td>@Faizankhan</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ayan</td>
<td>Shaikh</td>
<td>@AyanShaikh</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This is the first collapsible section. Icons can be added to make toggles visually appealing.
This section contains nested collapsible sections for organizing content hierarchically.
This is a nested collapsible section inside Section 2.
Another nested collapsible section.
- Item 1
- Item 2
- Item 3
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Rehan | Syed | @Rehansyed |
| 2 | Faizan | khan | @Faizankhan |
| 3 | Ayan | Shaikh | @AyanShaikh |