Collection of free HTML <details> & <summary> with CSS code examples (with little JS). Update of June 2019 collection. 5 new items.

  1. Accordions CSS
  2. jQuery Accordions
  3. React Accordions

Creator

  • johnbarnitz

Programming language

  • HTML / CSS

Information a code

TreeView Details/Summary

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css

Creator

  • Garet McKinley

Programming language

  • HTML / CSS

Information a code

Pure CSS Dropdown Menu

Pure CSS dropdown menu with details and summary.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Frederick Allen

Programming language

  • HTML / CSS

Information a code

HTML Only Accordion

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Niels Voogt

Programming language

  • HTML / CSS (SCSS)

Information the code

Details Element

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

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Mert Cukuren

Programming language

  • HTML / CSS (SCSS)

Information the code

Animated Details Element

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Tony Banik

Programming language

  • HTML (Pug) / CSS (SCSS) / JS

Information a code

Unit Testing Results Panel

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • James Steinbach

Programming language

  • HTML / CSS (SCSS)

Information the code

Details Elements Example

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: HTML5 Details & Summary HTML5 Details & Summary - GIF Demo

Creator

  • Jenning

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

HTML5 Details & Summary

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Details/Summary Animated Accordion Details/Summary Animated Accordion - GIF Demo

Creator

  • Kam Black

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Details/Summary Animated Accordion

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, font-awesome.js

Demo image: HTML <details> & <summary> HTML <details> & <summary> - GIF Demo

Creator

  • Jessica Paoli

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

HTML <details> & <summary>

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js, jquery.color.js

Creator

  • Isaione

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

HTML5 Details & Summary File Tree

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Demo image: Details & Summary Details & Summary - GIF Demo

Creator

  • Halida Astatin

Programming language

  • HTML / CSS (Less) / JavaScript

Information the code

Details & Summary

Experiment with details & summary HTML tags.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: <details> & <summary>: Hotel Room Selection <details> & <summary>: Hotel Room Selection - GIF Demo

Creator

  • Leena Lavanya

Programming language

  • HTML / CSS / JavaScript

Information the code

<details> and <summary>: Hotel Room Selection

Click one, and the others close.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Details + Summary Details + Summary - GIF Demo

Creator

  • AMAN

Programming language

  • HTML / CSS (SCSS)

Information the code

Details + Summary

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Spoiler alert with <details> and <summary> Spoiler ale with challenge: <details> and <summary> - GIF Demo

Creator

  • Stephen Lee

Programming language

  • HTML / CSS

Information the code

Spoiler alert with <details> and <summary>

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Recipe with <details> and <summary> Recipe with <details> and <summary> - GIF Demo

Creator

  • Porgeee

Programming language

  • HTML / CSS

Information the code

Recipe with <details> and <summary>

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Code Snippet Repository Code Snippet Repository - GIF Demo

Creator

  • Pieter Biesemans

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Code Snippet Repository

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

Browser Support: Chrome, Firefox, Opera, Safari

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

Demo image: Details & Summary Details & Summary - GIF Demo

Creator

  • Mesut Koca

Programming language

  • HTML / CSS (SCSS)

Information the code

Details & Summary

Frequently asked questions with HTML details & summary tags.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: tailwind.css

Demo image: Details & Summary Details & Summary - GIF Demo

Creator

  • yuanchuan

Programming language

  • HTML / CSS / JavaScript

Information the code

Details & Summary

Code example with HTML details and summary tags.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Details and Summary Details and Summary - GIF Demo

Creator

  • Monica Wheeler

Programming language

  • HTML / CSS (PostCSS)

Information the code

Details and Summary

HTML frequently asked questions layout.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Responsive Web Page Split Screen Responsive Web Page Split Screen - GIF Demo

Creator

  • Amli

Programming language

  • HTML / CSS

Information the code

Responsive Web Page Split Screen

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: HTML <details> and <summary> HTML <details> and <summary> - GIF Demo

Creator

  • Allistair Lee

Programming language

  • HTML / CSS / JavaScript

Information the code

HTML details and summary

Simple frequently asked questions template.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

Demo image: <details> and <summary> <details> and <summary> - GIF Demo

Creator

  • Vincent Danna

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

<details> and <summary>

Simple example with HTML details and sammary.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: <details> and <summary> <details> and <summary> - GIF Demo

Creator

  • Artem

Programming language

  • HTML (Haml) / CSS (Sass) / JavaScript (Babel)

Information the code

<details> and <summary>

Quick and dirty sketch of details accordion.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Bucket List Destinations Bucket List Destinations - GIF Demo

Creator

  • Yanely Ramirez

Programming language

  • HTML / CSS (SCSS)

Information the code

Bucket List Destinations

Yet another example with HTML details and summary tags.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Digital Monopoly Properties Digital Monopoly Properties - GIF Demo

Creator

  • Kyle

Programming language

  • HTML / CSS

Information the code

Digital Monopoly Properties

Idea for using the details and summary tags.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: A Detailed Summary of Life A Detailed Summary of Life - GIF Demo

Creator

  • Tony Banik

Programming language

  • HTML / CSS (SCSS)

Information the code

A Detailed Summary of Life

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

Demo image: Gracefully-degrading <details> Accordion Gracefully-degrading <details> Accordion - GIF Demo

Creator

  • Keith Pickering

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Toggle Function & Smooth Scroll Pure HTML & CSS Toggle Function & Smooth Scroll Pure HTML & CSS - GIF Demo

Creator

  • Kseso

Programming language

  • HTML / CSS

Information the code

Toggle Function & Smooth Scroll Pure HTML & CSS

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Animated Collapse / Expend Component Animated Collapse / Expend Component - GIF Demo

Creator

  • Elior Tabeka

Programming language

  • HTML / CSS (SCSS)

Information the code

Animated Collapse/Expend Component

Collapse/Expend with HTML details & summary.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: