Accordion

processed with Commons Bootstrap 5 + Tabler 1.0
Documentation / Accordion

# Default accordion with icons

An accordion allows users to toggle the display of sections of content.

Nunc tempus ornare sapien vitae volutpat. Nullam a condimentum odio. Nulla ac interdum sapien, vel commodo libero. Morbi vel leo at nisi finibus sagittis a sit amet nunc.

Suspendisse luctus luctus est vel posuere. Cras vitae mattis eros. Aenean venenatis vehicula eros, imperdiet facilisis elit porta non. 
<@accordionContainer id='parent_id'>
	<@accordionPanel collapsed=true childId='child_id1'>
		<@accordionHeader title='Panel 1' headerIcon='users' >
		</@accordionHeader>
		<@accordionBody>
			Nunc tempus ornare sapien vitae volutpat.
            Nullam a condimentum odio.
            Nulla ac interdum sapien, vel commodo libero.
            Morbi vel leo at nisi finibus sagittis a sit amet nunc. 
		</@accordionBody>    
	</@accordionPanel>
	<@accordionPanel collapsed=true childId='child_id2'>
		<@accordionHeader title='Panel 2' headerIcon='cog' >
		</@accordionHeader>
		<@accordionBody>
			Suspendisse luctus luctus est vel posuere.
            Cras vitae mattis eros.
            Aenean venenatis vehicula eros,
            imperdiet facilisis elit porta non.  
		</@accordionBody>    
	</@accordionPanel>
</@accordionContainer>

# Parameters documentation


accordionContainer

The container for the panel, header, body elements of the accordion.

Parameter Value Default Use
id string none Unique identifier for the accordion container. If not provided, a default ID will be generated.

accordionPanel

Defines a panel in the accordion. The panel can be collapsed or expanded.

Parameter Value Default Use
color string none Defines the color of the panel. Options include primary, info, warning, danger, success.
collapsed boolean true Indicates whether the panel is collapsed by default.
childId* string none Unique identifier for the child element of the accordion panel. If not provided, a default ID will be generated.
id string none Unique identifier for the accordion panel. If not provided, a default ID will be generated.
params string none Additional parameters for the panel.

accordionHeader

Defines the header of the accordion panel. It can include a title and an icon.

Parameter Value Default Use
id string none Unique identifier for the accordion header. If not provided, a default ID will be generated.
title string none H2 title of the accordion header.
parentId* string none Variable from the accordionContainer macro
childId* string none Variable from the accordionPanel macro
boxTools boolean false Indicates whether the box tools are displayed in the header.
params string none Additional parameters for the header.
headerIcon string none Icon to display in the header.

accordionBody

Defines the body of the accordion panel. It contains the content displayed when the panel is expanded.

Parameter Value Default Use
id string none The childID defined in the parent accordionPanel macro.
class string none The childClass defined in the parent accordionPanel macro.
expanded boolean none The expanded state defined in the parent accordionPanel macro.
params string none Additional parameters for the body.