Making Expando/Accordian with Plain Html

Here's something that escaped me for far too long.

You can create expand/collapse regions (also known as 'twisties') with plain html using the details tag (and the summary tag)

tip This is not supported on IE.

Simplest example

for example, this html:

<details>Once expanded, this is the details you will see.</details>

Behaves like this:

Once expanded, this is the details you will see.

Example with Summary

And Html like this:

<details>
<summary>Expand to see the details....</summary>
Once expanded, this is the details you will see.
</details>

Behaves like this:

Expand to see the details.... Once expanded, this is the details you will see.

Note that the summary text is visible both before and after the details are expanded.

You can alter that behaviour with css that checks if the boolean "open" attribute is defined on the details element, for example:

This style:

details.example3[open] > summary {
	background-color:red;
	color:black;
	outline:none;
}

And this html...

<details class='example3'>
<summary>Expand to see the details....</summary>
Once expanded, this is the details you will see.
</details>

Behaves like this:

Expand to see the details.... Once expanded, this is the details you will see.

Animation example

This example uses this style:

<style>
details.example4[open] p {
	animation: animateDown 0.2s linear forwards;
}

@keyframes animateDown {
	0% {
		opacity: 0;
		transform: translatey(-15px);
	}
	100% {
		opacity: 1;
		transform: translatey(0);
	}
}
</style>
Watch this paragraph expand over 0.2 of a second...

Once expanded, this is the details you will see. I've made this text detail a bit bigger than some of the others. I hope that it is ok. Also, it includes a paragraph tag that is used for selecting the section to which the animation is applied.

Consider "::before" and "::after" pseudo elements

This article A (terrible?) way to do footnotes in HTML includes some before/after pseudo elements... in some cases that might be a useful idea.

details[open]::before {
	content: " [";
}
details[open]::after {
	content: "]";
}

Some other selectors/pseudo elements to consider are:

details:not([open])::before
details:not([open])::after
details:not([open]) summary::before
details:not([open]) summary::after

...For styling details or summary when the detail is not open.

Remove the list style

...and you may wish to change the list style. Remove it like this...

summary {
	 list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}

...and replace that with something awesome.

And add a cursor pointer to the summary

Generally a good idea... (though not useful for mobile)

summary {
	cursor: pointer;
}

full example (code afterwards)

<details>
<summary>Expand to see the details....</summary>
Once expanded, this is the details you will see.
</details>