Collapsible

Copyimport {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/ui/collapsible';

Copy<Collapsible>
  <CollapsibleTrigger>
    Can I use this in my project?
  </CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

CopyCollapsible
├── CollapsibleTrigger
└── CollapsibleContent

Copyimport Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/ui/collapsible';
 
export default class Example extends Component {
  @tracked open = false;
 
  setOpen = (value: boolean) => {
    this.open = value;
  };
 
  <template>
    <Collapsible @open={{this.open}} @onOpenChange={{this.setOpen}}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  </template>
}