Bootstrap Hide Show Toggle Collapse

Bootstrap is a popular front-end web development framework that offers a wide range of components and functionalities to create responsive and mobile-first web pages. One of the common components used is the hide/show toggle collapse. In this article, we will discuss how to use the Bootstrap hide/show toggle collapse component.

What is Hide/Show Toggle Collapse?

Hide/show toggle collapse is a component that is used to hide or show content in a web page. This component is commonly used to display long texts, images, or videos that are too large to fit on a page. The user can click on a button, and the content will either expand or collapse, allowing the user to view the content comfortably.

How to Use Hide/Show Toggle Collapse in Bootstrap

To use the hide/show toggle collapse in Bootstrap, we need to follow these steps:

Step 1: Add the Required Libraries

First, we need to include the Bootstrap CSS and JavaScript libraries. We can do this by adding the following code inside the head tag of our HTML file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Step 2: Create the Collapse Wrapper

Next, we need to create a wrapper element that will contain the content that we want to hide or show. We use the class "collapse" to this element. Additionally, we can use the class "in" if we want to show the content by default.

<div class="collapse in" id="content-wrapper">
  <p>...</p> <!-- Content to show/hide -->
</div>

Step 3: Create the Toggle Button

We also need to create a button that the user can click to expand or collapse the content. We use the data-target attribute to specify the ID of the collapse wrapper element.

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#content-wrapper">Toggle Content</button>

That's it! We have successfully added the hide/show toggle collapse component to our web page.

Additional Options

Bootstrap offers some additional options that we can use to control the behavior of the hide/show toggle collapse component. Here are some of the options:

• data-parent: This attribute ensures that only one collapsible element is open at a time by assigning the same value to multiple data-parents.
• aria-expanded: This attribute is set to true if the content is displayed, and false if the content is hidden.
• aria-controls: This attribute identifies the ID of the collapsible element.

Conclusion

Bootstrap hide/show toggle collapse is a useful component that we can use to create a more user-friendly web page. We have discussed how to use this component in Bootstrap and how to control its behavior using additional attributes. By following these steps, we can easily add a hide/show toggle collapse component to our web page.