Bootstrap Collapse

Bootstrap Collapse allows you to show and hide content with a smooth sliding motion. It’s commonly used for accordions, togglable sections, and collapsible menus.

Works in Bootstrap 3, 4, and 5 using the .collapse class and JavaScript.

✅ Basic Collapse

• data-toggle="collapse" → Makes the button toggle the collapse.

• href="#demo" → Target ID of the content.

• .collapse → Hides the content by default.

🔹 Collapse with show (Visible by default)

• .show → Content is expanded when page loads.

🎯 Accordion (Only one section open at a time)

• data-parent="#accordion" → Ensures only one section is open at a time.

• .in → Default open section (Bootstrap 3). In Bootstrap 4/5, use .show.

⚡ Collapse with Buttons

• data-target="#demo3" → Alternative to href="#id".

🔹 Collapsible Navigation Example

✔ Summary