Accordion

Components

Accordion

Attributes: alwaysOpen

Functions: open close

$$props: class

AccordionItem

Attributes: active disabled lazy loadOnce

Slots: header body

Events: open close

$$props: class

Internal css classes

AccordionItem

active, disabled

accordion-header

accordion-collapse, collapse, show

Default Accordion

The default Accordion loads all content and only one AccordionItem can be active at a time. Disabled Items won't be activated, but their content will be loaded regardless.

Body 1

Body 2

Body 3

Body 4


<Accordion>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	...
</Accordion>

It's also possible to preselect an Item with active.

Body 1

Body 2

Body 3

Body 4


<Accordion>
	<AccordionItem active>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
</Accordion>

To have multiple AccordionItems active, add allwasOpen to Accordion.

Default

Body 1

Body 2

Body 3

Body 4

Preselect

Body 1

Body 2

Body 3

Body 4


<Accordion alwaysOpen>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
</Accordion>

Lazyload and Persistence

It's possible to lazyload Accordion Content by adding lazy to AccordionItem.

Keep in mind the content will be loaded every time the item is activated. To only load it once, add loadOnce.

Regular

Alwasy open

Body 1

Body 3


<Accordion>
	<AccordionItem lazy>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	<AccordionItem lazy loadOnce>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	...
</Accordion>

Nested Accordions

If neccessary, Accordions can be nested.

Body 1

Body 2

Body 3

Body 4

Body 1

Body 2

Body 3

Body 4


<Accordion>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			<Accordion>
				<AccordionItem>
					<div slot="header">
						...
					</div>
					<div slot="body">
						...
					</div>
				</AccordionItem>
				<AccordionItem>
					<div slot="header">
						...
					</div>
					<div slot="body">
						...
					</div>
				</AccordionItem>
				...
			</Accordion>
		</div>
	</AccordionItem>
	<AccordionItem>
		<div slot="header">
			...
		</div>
		<div slot="body">
			...
		</div>
	</AccordionItem>
	...
</Accordion>

Open and close via buttons

If so desired, AccordionItems can be opened and closed via script with open() and close(). The number indicates which Item will be opened / closed

Body 1


let accordion
<Accordion bind:this={accordion}>
	<AccordionItem lazy>
		<div slot="body">
			<button on:click={() => {accordion.open(2)}}></button>
			...
		</div>
	</AccordionItem>
	<AccordionItem lazy loadOnce>
		...
	</AccordionItem>
	...
</Accordion>