Collection of free HTML <details> & <summary> with CSS code examples

Latest Transactions

Concept component displaying your latest money transactions.

Animate Accordions with WAAPI

<details> and <summary> with animated arrow (no JS)

Details Modal

By nesting a modal inside a details element it is automaticly shown when the details is opened. And by nesting the overlay inside the summary element, we can use that to trigger a close.

Native HTML Details Element Styled via CSS

Rebound shot from Dribbble to implement an accordion-like element using only the details/summary native HTML element and CSS.

Pure CSS Details Interaction

Using HTML <details> to power an SVG menu toggle.

Details and Summary

Details Element for Help Text

You can use the details element to provide additional information on fields that new users might need help with.

TreeView Details/Summary

Pure CSS Dropdown Menu

Pure CSS dropdown menu with details and summary.

HTML Only Accordion

Exploring styling the HTML details and summary tags to create functional accordion without any JavaScript.

Details Element

A details HTML element with a custom arrow in SVG, no JavaScript.

Animated Details Element

Unit Testing Results Panel

Details Elements Example

HTML5 Details & Summary

details works like an accordian - but without the need for script, supported by most major browsers (except IE & Edge).

Details/Summary Animated Accordion

You can use this without JS and it works fine, except for the closing animation.

HTML <details> & <summary>

HTML <details> & <summary>: bad kids’ jokes.

HTML5 Details & Summary File Tree

Details & Summary

Experiment with details & summary HTML tags.

<details> and <summary>: Hotel Room Selection

Click one, and the others close.

Details + Summary

<details> and <summary> with pure CSS. Not supported IE & Edge browsers.

Spoiler alert with <details> and <summary>

Using <details> and <summary> to hide/reveal spoilers.

Recipe with <details> and <summary>

Using <details> and <summary> to create a recipe for enchiladas.

Code Snippet Repository

Code snippet repository with HTML <details> & <summary>.

Details & Summary

Frequently asked questions with HTML details & summary tags.

Details & Summary

Code example with HTML details and summary tags.

Details and Summary

HTML frequently asked questions layout.

Responsive Web Page Split Screen

Responsive web page with a "Split Screen" style by using only CSS. Made with HTML <details> and <summary>. Try it in small screen.

HTML details and summary

Simple frequently asked questions template.

<details> and <summary>

Simple example with HTML details and sammary.

<details> and <summary>

Quick and dirty sketch of details accordion.

Bucket List Destinations

Yet another example with HTML details and summary tags.

Digital Monopoly Properties

Idea for using the details and summary tags.

A Detailed Summary of Life

A detailed summary of life with <details> & <summary>.

Gracefully-degrading <details> Accordion

The details element provides a very easy and accessible implementation of the accordion, one of the most common UI components. The problem is that the default functionality is anything but smooth. Here I've tried to solve this issue with a nice ES6 class which expands the element's functionality without breaking accessibility.

Toggle Function & Smooth Scroll Pure HTML & CSS

Grid layout + details & summary + scroll-behavior. All in pure CSS3.

Animated Collapse/Expend Component

Collapse/Expend with HTML details & summary.