Interactivity

Collapse

Reveal and hide content with synchronized state, lifecycle events, and keyboard-friendly controls.

Interactivity guideCopy-ready referencev0.7.0 current

Interactivity

Collapse

Reveal supporting content without removing it from the document. The controller synchronizes the native hidden attribute, aria-expanded, and data-bs-state.

HTML · Boobstrap JS

<button class="bs-btn bs-btn-secondary" type="button"
  data-bs-toggle="collapse" aria-controls="details">
  Toggle details
</button>

<div class="bs-collapse" id="details" hidden>
  Progressive by design.
</div>

<div x-data="bsCollapse">
  <button class="bs-btn bs-btn-secondary" type="button"
    x-bind="trigger" aria-controls="details">
    Toggle details
  </button>

  <div class="bs-collapse" id="details" x-bind="panel" hidden>
    Progressive by design.
  </div>
</div>

import { useCollapse } from "@boobstrap/react";

function Details() {
  const collapse = useCollapse({ id: "details" });

  return (
    <>
      <button className="bs-btn bs-btn-secondary"
        {...collapse.getTriggerProps()}>
        Toggle details
      </button>
      <div className="bs-collapse" {...collapse.getPanelProps()}>
        Progressive by design.
      </div>
    </>
  );
}

<script setup>
import { useCollapse } from "@boobstrap/vue";

const details = useCollapse({ id: "details" });
</script>

<template>
  <button class="bs-btn bs-btn-secondary" v-bind="details.getTriggerProps()">
    Toggle details
  </button>
  <div class="bs-collapse" v-bind="details.getPanelProps()">
    Progressive by design.
  </div>
</template>

Structure

Give the panel a unique id and reference it from the trigger's aria-controls.

State

.bs-collapse supplies the visual contract; hidden is the readable initial state.

Accessibility

Use a real button. The controller maintains aria-expanded and fires cancelable show/hide events.

Navigation drawers: use the Sidebar component for an off-canvas menu. Sidebar adds a backdrop, focus containment and restoration, Escape handling, a persistent desktop rail, and document scroll locking; Collapse intentionally remains a lightweight inline disclosure.

Initialize and observe collapse

The aggregate initializer discovers declarative collapse markup. Lifecycle events let application code observe or cancel a transition.

JavaScript · Initialization and events

import { initBoobstrap } from "@boobstrap/boobstrap/js";

const boobstrap = initBoobstrap(document);
const panel = document.querySelector("#details-panel");

panel.addEventListener("bs:collapse:shown", () => {
  panel.querySelector("a, button, input")?.focus();
});

// Later: boobstrap.destroy();

Collapse API

Import Collapse from @boobstrap/boobstrap/js/collapse for direct control.

Contract	Purpose
`show()` / `hide()`	Change visibility and synchronized public state.
`toggle()`	Invert the current panel state.
`bs:collapse:*`	Cancelable before-events and bubbling completed-events.