38 HTML <details> & <summary> with CSS

About a code

Latest Transactions

Concept component displaying your latest money transactions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animate Accordions with WAAPI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Details Interaction

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Details and Summary

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Details Element for Help Text

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

TreeView Details/Summary

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css

About a code

Pure CSS Dropdown Menu

Pure CSS dropdown menu with details and summary.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

HTML Only Accordion

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Details Element

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Animated Details Element

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Unit Testing Results Panel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Details Elements Example

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

HTML5 Details & Summary

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Details/Summary Animated Accordion

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, font-awesome.js

About the code

HTML <details> & <summary>

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js, jquery.color.js

About a code

HTML5 Details & Summary File Tree

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

About the code

Details & Summary

Experiment with details & summary HTML tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

<details> and <summary>: Hotel Room Selection

Click one, and the others close.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

Details + Summary

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Spoiler alert with <details> and <summary>

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Recipe with <details> and <summary>

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Code Snippet Repository

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: darcula.css, highlight.js, scss.js, list.js,

About the code

Details & Summary

Frequently asked questions with HTML details & summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: tailwind.css

About the code

Details & Summary

Code example with HTML details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Details and Summary

HTML frequently asked questions layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

HTML details and summary

Simple frequently asked questions template.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

About the code

<details> and <summary>

Simple example with HTML details and sammary.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

<details> and <summary>

Quick and dirty sketch of details accordion.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Bucket List Destinations

Yet another example with HTML details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Digital Monopoly Properties

Idea for using the details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

A Detailed Summary of Life

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Toggle Function & Smooth Scroll Pure HTML & CSS

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Collapse/Expend Component

Collapse/Expend with HTML details & summary.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -