A Lit element for creating accessible expand/collapse elements. Animates the height using CSS transitions from 0 to auto.
- Handles the height of animations of your elements,
autoincluded! - Minimally-styled to be functional--you control the styles.
- No animation framework required! Simply powered by CSS animations.
npm install @collapsed/litimport { CollapsedDisclosure } from "@collapsed/lit";
import { html } from "lit";
export function App() {
function handleClick(evt) {
const collapse = document.querySelector("#disclosure");
const btn = event.target;
collapse.toggleAttribute("open");
btn.setAttribute("aria-expanded", collapse.hasAttribute("open").toString());
}
return html`<div>
<button
aria-controls="disclosure"
aria-expanded="false"
@click="${handleClick}"
>
Toggle
</button>
<collapsed-disclosure id="disclosure">
<!-- Content goes here -->
</collapsed-disclosure>
</div>`;
}