AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that match the other components' aesthetic.
Yes. It's animated by default, but you can disable it if you prefer.
templ
templ AccordionDemo() {
@ui.Accordion("max-w-md", nil) {
@ui.AccordionItem("", nil) {
@ui.AccordionTrigger("", nil) {
Is it accessible?
}
@ui.AccorionContent("", nil) {
Yes. It adheres to the WAI-ARIA design pattern.
}
}
@ui.AccordionItem("", nil) {
@ui.AccordionTrigger("", nil) {
Is it styled?
}
@ui.AccorionContent("", nil) {
Yes. It comes with default styles that match the other components' aesthetic.
}
}
@ui.AccordionItem("", nil) {
@ui.AccordionTrigger("", nil) {
Is it animated?
}
@ui.AccorionContent("", nil) {
Yes. It's animated by default, but you can disable it if you prefer.
}
}
}
}