💡 Today I Learned

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>
Expand to see the details.... Once expanded, this is the details you will see.

Caveat

Details/Summary are not supported in IE. And we're finally getting to a point where those words don't mean so much. 😅.

History

Expand/collapse sections are similar to Ted Nelson's 1967 idea "Stretch-Text", which I first learned about from Brad Neuberg's stretchtext.js.

"Similar" is doing a lot of work in the previous paragraph. The stretch-text idea is pretty interesting and more nuanced than the common expand/collapse region.

Stretchtext consists of ordinary continuous text which can be "stretched", or made longer and more detailed. By pointing at specific areas and pulling the throttle in the "magnify" direction, the reader may obtain a greater detail on a specific subject, or area of the text. The text stretches, becoming longer, with replacement phrases, new details and additional clauses popping into place.

Ted Nelson, Hypertext Note 8, 1967

Source

See also