Bootstrap Collapse

The Bootstrap Collapse component allows you to hide or show content in a collapsible manner. This feature is particularly useful for creating expandable sections on a webpage, enhancing user experience by saving space.

Key Concepts

• Collapsible Elements: Sections of content that can be toggled to show or hide.
• JavaScript Dependency: The collapse functionality requires Bootstrap's JavaScript library to operate effectively.
• HTML Structure: Collapsible content is typically structured using <div> elements.

How to Use Bootstrap Collapse

1. Basic Structure

To create a collapsible element, you need the following:

• A button or link to trigger the collapse.
• A collapsible content area.

Example Code

<!-- Button to trigger the collapse -->
<button class="btn btn-primary" data-toggle="collapse" data-target="#demo">Toggle Content</button>

<!-- Collapsible content -->
<div id="demo" class="collapse">
  <p>This content is collapsible!</p>
</div>

2. Attributes

• data-toggle: Indicates that the element should trigger a collapse.
• data-target: Specifies the ID of the collapsible content.

3. Customization

You can customize the collapsible element using various Bootstrap classes, such as:

• .show: To display the collapsible content by default.
• .in: For older versions of Bootstrap to indicate an open state.

Example with Default Open

<!-- Button to trigger the collapse -->
<button class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Toggle Content</button>

<!-- Collapsible content that is open by default -->
<div id="demo2" class="collapse show">
  <p>This content is collapsible and open by default!</p>
</div>

Conclusion

The Bootstrap Collapse component is a straightforward way to manage content visibility on a webpage. By utilizing buttons to toggle collapsible sections, users can engage with your content more interactively and efficiently.

Additional Resources

• Bootstrap Documentation for more detailed examples and options.