# Bootstrap5 Collapse
Bootstrap5 Collapse makes it easy to show and hide content.
**data-bs-toggle** and **data-bs-target** are custom data attributes used to define component behavior and target elements.
**1. data-bs-toggle attribute:**
* Used to define the component's behavior, indicating when the component should be triggered.
* The settable values depend on the specific component type, such as `"collapse"` (collapse menu), `"modal"` (modal), `"tab"` (tab), etc.
* `data-bs-toggle="collapse"` is used to trigger the expansion and collapse of a collapse menu.
* `data-bs-toggle="modal"` is used to trigger the display and hide of a modal.
* `data-bs-toggle="tab"` is used to trigger the switching of tabs.
**2. data-bs-target attribute:**
* Used to specify the target element or target selector for the component.
* The target element can be a CSS selector, used to identify the specific element to operate on.
* It can also be a specified element ID, starting with `#`, such as `data-bs-target="#myModal"`.
* The `data-bs-target` attribute is used in conjunction with the `data-bs-toggle` attribute to associate the component behavior with the target element.
In the following example, when the button is clicked, the `data-bs-toggle="collapse"` attribute triggers the collapse menu behavior, and the `data-bs-target="#demo"` attribute specifies the target element of the collapse menu as the `
` element with the ID `demo`.
## Example
Here is some test content...
[Try it »](#)
### Example Explanation
The `.collapse` class is used to specify a collapsible element (the `
` in the example); clicking the button will toggle between hiding and showing.
To control the hiding and showing of content, you need to add the `data-bs-toggle="collapse"` attribute to the `` or `
YouTip