The bootstrap 5 collapse feature is used to show and hide the content.
Steps to create bootstrap 5 collapsible component:
<a>
or <button>
to link collapsible element via href
attribute of
<a>
and button
data attribute data-bs-target
.
data-bs-toggle="collapse"
to either <a>
or <button>
and other data attribute data-bs-target="#id-of-collpasible-element"
to only <button>
while as href="#"
attribute is used by <a>
to link collasible element by id.
<button>
data attribute
data-bs-target="#IdOfCollapsibleContainer"
and
href="#IdOfCollapsibleContainer"
attribute of <a>
element.Please keep in mind that assigning collpasible container id inside data attribute of data-bs-target
and href
is must be preceded by hash chracter(#).
Note:Please keep in mind that by default collapsible element is hidden. To show the hidden content, you have to use .show
to collapsible elements(<div>
containing class.collapse
).
Note:In this example, the link is used to show and hide the collapsible content.
Note:In this example, multiple target element is used to show and hide the collapsible content.