Components menu
Collapse
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
Side navigation
The collapse component is used to minimise the side navigation & table of contents when viewing on a mobile device. It requires the content to be duplicated and use the <div class="d-none d-lg-block"></div> for the desktop view and <div class="d-lg-none"></div> for the mobile view. The collapse code sits within the mobile view class.
Some placeholder content for the collapse component using a link with href. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the collapse component using a button with data-bs-target. This panel is hidden by default but revealed when the user activates the relevant trigger.
HTML
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample-href" role="button" aria-expanded="false" aria-controls="collapseExample-href">
Link with href
</a>
<div class="collapse" id="collapseExample-href">
<div class="card card-body">
Some placeholder content for the collapse component using a link with href. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample-target" aria-expanded="false" aria-controls="collapseExample-target">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample-target">
<div class="card card-body">
Some placeholder content for the collapse component using a button with data-bs-target. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>