Today we will be looking at a native HTML element that can be used to create expandable elements.
It's the detail-summary combination, and the result will look like this.
HTML Detail summary permalink
To add this functionality, we can enter a
details element inside it will have a
summary which will act as the title, and below that, a
p that will be the collapsable content.
It will look like this:
<summary>How old is Dragonball Z?</summary>
Dragon Ball Z is adapted from the final 324 chapters of the manga series which were
published in Weekly Shōnen Jump from 1988 to 1995. It premiered in Japan on Fuji
Television on April 26, 1989
You can have multiple details on one page, and they are even styleable!
border: 1px solid #efefef;
Browser support permalink
The cool part about the detail and summary combi is that it has pretty good support! It's just IE not playing along.