Accordion / Tabs

This Web Component uses an accordion pattern and switches to a tabs pattern at the given breakpoint.

Example

A doggo

Doggo ipsum shooberino most angery pupper I have ever seen pats super chub puggorino lotsa pats, fluffer woofer heckin good boys and girls very jealous pupper. Shibe corgo super chub heck big ol heckin angery woofer length boy, shoob most angery pupper I have ever seen thicc pupper. Vvv fat boi much ruin diet puggo fat boi heckin good boys and girls heckin good boys, doge I am bekom fat big ol pupper yapper. Extremely cuuuuuute aqua doggo much ruin diet snoot very jealous pupper boof length boy, ur givin me a spook wow very biscit stop it fren puggorino. snoot. Heckin good boys most angery pupper I have ever seen very jealous pupper pats, lotsa pats puggo. Super chub heckin good boys shoober most angery pupper I have ever seen, shoober maximum borkdrive. Shibe wrinkler waggy wags corgo maximum borkdrive, vvv fluffer.

And another doggo

Doggo ipsum super chub snoot doggorino blop extremely cuuuuuute porgo maximum borkdrive super chub, what a nice floof big ol smol wow such tempt most angery pupper I have ever seen. You are doing me the shock wow such tempt clouds you are doing me a frighten very good spot boofers, porgo heckin good boys and girls puggo heck. Pupper yapper pupperino wow very biscit floofs, vvv ruff dat tungg tho.

The last doggo

Doggo ipsum mlem waggy wags corgo woofer heckin good boys and girls, vvv borkf. Very taste wow heckin good boys ur givin me a spook shoober smol borking doggo with a long snoot for pats, mlem porgo vvv. You are doin me a concern boofers clouds snoot, puggo. Dat tungg tho bork I am bekom fat doing me a frighten wrinkler, ur givin me a spook stop it fren shoob the neighborhood pupper yapper, porgo heckin angery woofer blop. Extremely cuuuuuute long woofer shooberino I am bekom fat big ol length boy very good spot heckin good boys and girls blep, very taste wow boofers shoober pats snoot vvv. He made many woofs borking doggo doing me a frighten maximum borkdrive heckin, wow very biscit long doggo such treat. Adorable doggo tungg smol big ol pupper most angery pupper I have ever seen doggorino much ruin diet, heck blep you are doing me a frighten doggorino borkdrive. Adorable doggo extremely cuuuuuute wrinkler yapper, such treat doggo. Long doggo lotsa pats shibe thicc, puggo.

Options

`breakpoint`

This can either be a string like 48rem, 48em or 768px or a number. A number would be interpreted as pixels.

At this breakpoint, the accordion switches to tabs. Please note that this is based on the inline size of the element, not on a media query.

If breakpoint is obmitted, the Web Component will always use the accordion pattern.

`current`

An integer, that defines which element is opened. The Web Component will listen to changes of this attribute.

Instead of defining current, you can also simply set the open attribute on one of the <details> elements.

Usage

To use this you need to use <details></details> and <summary></summary> elements:

<accordion-tabs breakpoint="48rem">
	<details>
		<summary>A doggo</summary>
		<p>
			…
		</p>
	</details>
	<details>
		<summary>And another doggo</summary>
		<p>
			…
		</p>
	</details>
	<details>
		<summary>The last doggo</summary>
		<p>
			…
		</p>
	</details>
</accordion-tabs>