Skip to Content

accordion

Does it work without JavaScript?
Yes, this accordion uses the HTMLDetailsElement element.
One at a time
Give the details elements a name attribute to create an accordion.
html
<details name="accordion" class="group w-full border-b px-4 pt-4 pb-2">
	<summary
		class="link flex cursor-default list-none items-center justify-between gap-8 py-2"
	>
		<span>Does it work without JavaScript?</span>
		<span
			class="icon-[lucide--chevron-down] transition group-open:rotate-180"
		></span>
	</summary>
	<div>
		Yes, this accordion uses the
		<code>HTMLDetailsElement</code>
		element.
	</div>
</details>

<details name="accordion" class="group w-full border-b px-4 pt-4 pb-2">
	<summary
		class="link flex cursor-default list-none items-center justify-between gap-8 py-2"
	>
		<span>One at a time</span>
		<span
			class="icon-[lucide--chevron-down] transition group-open:rotate-180"
		></span>
	</summary>
	<div>
		Give the
		<code>details</code>
		elements a
		<code>name</code>
		attribute to create an accordion.
	</div>
</details>

<style>
	details {
		@media (prefers-reduced-motion: no-preference) {
			interpolate-size: allow-keywords;
		}

		/* for safari */
		summary::-webkit-details-marker {
			display: none;
		}

		&::details-content {
			transition:
				content-visibility 300ms allow-discrete,
				block-size 300ms;
			block-size: 0;
			overflow-y: clip;
		}

		&[open]::details-content {
			block-size: auto;
		}
	}
</style>

Overview

The <details> element is a standard element designed to hide and show content. Notably, it works without using any JavaScript.

Animation

You can animate the <details> element with discrete transitions the interpolate-size property. This example was adapted from this article from Adam Argyle.

Group

Add the same name attribute to each <details> element to create a group which can have only one open at a time. Here, name=accordion is applied to each element creating an accordion component. If you are making an accordion component using a UI framework, be sure to generate a unique name for each accordion group added to the page.