About Lesson
Collapse with Icons (Show/Hide State)
- .bi-chevron-down, .bi-chevron-up → Bootstrap Icons for toggle state
- aria-expanded=”true/false” → Defines expanded/collapsed state
Example: Collapse with Icon Toggle
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#iconCollapse" aria-expanded="false">
<i class="bi bi-chevron-down"></i> Toggle Content
</button>
<div class="collapse mt-2" id="iconCollapse">
<div class="card card-body">
Content inside the collapse.
</div>
</div>
</body>
</html>
Explanation:
- Bootstrap Icons used for showing toggle state.
- aria-expanded=”false” keeps content hidden initially.
Output:
