Post thumbnail: 22 HTML <details> & <summary> with CSS

22 HTML <details> & <summary> with CSS

Collection of free HTML <details> & <summary> with CSS code examples (with little JS).

Related Articles

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

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

Author

  • Jenning

Made with

  • HTML (Pug) / CSS (Sass)

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: -

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

Author

  • Kam Black

Made with

  • HTML / CSS (SCSS) / JavaScript

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

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

Author

  • Jessica Paoli

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

HTML <details> & <summary>

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js, jquery.color.js

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

Author

  • Halida Astatin

Made with

  • HTML / CSS (Less) / JavaScript

About the code

Details & Summary

Experiment with details & summary HTML tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

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

Author

  • Leena Lavanya

Made with

  • HTML / CSS / JavaScript

About the code

<details> and <summary>: Hotel Room Selection

Click one, and the others close.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js

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

Author

  • AMAN

Made with

  • HTML / CSS (SCSS)

About the code

Details + Summary

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Stephen Lee

Made with

  • HTML / CSS

About the code

Spoiler alert with <details> and <summary>

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Porgeee

Made with

  • HTML / CSS

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: -

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

Author

  • Pieter Biesemans

Made with

  • HTML / CSS (SCSS) / JavaScript

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,

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

Author

  • Mesut Koca

Made with

  • HTML / CSS (SCSS)

About the code

Details & Summary

Frequently asked questions with HTML details & summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: tailwind.css

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

Author

  • yuanchuan

Made with

  • HTML / CSS / JavaScript

About the code

Details & Summary

Code example with HTML details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Monica Wheeler

Made with

  • HTML / CSS (PostCSS)

About the code

Details and Summary

HTML frequently asked questions layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Amli

Made with

  • HTML / 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: -

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

Author

  • Allistair Lee

Made with

  • HTML / CSS / JavaScript

About the code

HTML details and summary

Simple frequently asked questions template.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

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

Author

  • Vincent Danna

Made with

  • HTML (Haml) / CSS (Sass)

About the code

<details> and <summary>

Simple example with HTML details and sammary.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Artem

Made with

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

About the code

<details> and <summary>

Quick and dirty sketch of details accordion.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Yanely Ramirez

Made with

  • HTML / CSS (SCSS)

About the code

Bucket List Destinations

Yet another example with HTML details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Kyle

Made with

  • HTML / CSS

About the code

Digital Monopoly Properties

Idea for using the details and summary tags.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Tony Banik

Made with

  • HTML / CSS (SCSS)

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

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

Author

  • Keith Pickering

Made with

  • HTML / CSS (SCSS) / JavaScript

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: -

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

Author

  • Kseso

Made with

  • HTML / CSS

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: -

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

Author

  • Elior Tabeka

Made with

  • HTML / CSS (SCSS)

About the code

Animated Collapse/Expend Component

Collapse/Expend with HTML details & summary.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

back to top