Collapse
Toggle the visibility of content.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                collapse: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
NameDescription
.collapse-activeElement is displayed when collapse item is active
.collapse-inactiveElement is hidden when collapse item is active
.collapsed.collapse-activeElement is hidden when collapse item is not active
.collapsed.collapse-inactiveElement is displayed when collapse item is not active

{title}