DETAILS ELEMENT

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

Author

  • Niels Voogt

Made with

  • HTML / CSS (SCSS)

ANIMATED DETAILS ELEMENT

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS)

DETAILS ELEMENTS EXAMPLE

Author

  • James Steinbach

Made with

  • HTML / CSS (SCSS)

HTML5 DETAILS & SUMMARY

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

HTML5 Details & Summary - GIF Demo

Author

  • Jenning

Made with

  • HTML (Pug) / CSS (Sass)

DETAILS/SUMMARY ANIMATED ACCORDION

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

Details/Summary Animated Accordion - GIF Demo

Author

  • Kam Black

Made with

  • HTML / CSS (SCSS) / JavaScript

HTML <DETAILS> & <SUMMARY>

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

HTML <details> & <summary> - GIF Demo

Author

  • Jessica Paoli

Made with

  • HTML / CSS (SCSS) / JavaScript

DETAILS & SUMMARY

Experiment with details & summary HTML tags.

Details & Summary - GIF Demo

Author

  • Halida Astatin

Made with

  • HTML / CSS (Less) / JavaScript

<DETAILS> AND <SUMMARY>: HOTEL ROOM SELECTION

Click one, and the others close.

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

Author

  • Leena Lavanya

Made with

  • HTML / CSS / JavaScript

DETAILS + SUMMARY

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

Details + Summary - GIF Demo

Author

  • AMAN

Made with

  • HTML / CSS (SCSS)

SPOILER ALERT WITH <DETAILS> AND <SUMMARY>

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

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

Author

  • Stephen Lee

Made with

  • HTML / CSS

RECIPE WITH <DETAILS> AND <SUMMARY>

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

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

Author

  • Porgeee

Made with

  • HTML / CSS

CODE SNIPPET REPOSITORY

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

Code Snippet Repository - GIF Demo

Author

  • Pieter Biesemans

Made with

  • HTML / CSS (SCSS) / JavaScript

DETAILS & SUMMARY

Frequently asked questions with HTML details & summary tags.

Details & Summary - GIF Demo

Author

  • Mesut Koca

Made with

  • HTML / CSS (SCSS)

DETAILS & SUMMARY

Code example with HTML details and summary tags.

Details & Summary - GIF Demo

Author

  • yuanchuan

Made with

  • HTML / CSS / JavaScript

DETAILS AND SUMMARY

HTML frequently asked questions layout.

Details and Summary - GIF Demo

Author

  • Monica Wheeler

Made with

  • HTML / CSS (PostCSS)

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.

Responsive Web Page Split Screen - GIF Demo

Author

  • Amli

Made with

  • HTML / CSS

HTML DETAILS AND SUMMARY

Simple frequently asked questions template.

HTML <details> and <summary> - GIF Demo

Author

  • Allistair Lee

Made with

  • HTML / CSS / JavaScript

<DETAILS> AND <SUMMARY>

Simple example with HTML details and sammary.

<details> and <summary> - GIF Demo

Author

  • Vincent Danna

Made with

  • HTML (Haml) / CSS (Sass)

<DETAILS> AND <SUMMARY>

Quick and dirty sketch of details accordion.

<details> and <summary> - GIF Demo

Author

  • Artem

Made with

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

BUCKET LIST DESTINATIONS

Yet another example with HTML details and summary tags.

Bucket List Destinations - GIF Demo

Author

  • Yanely Ramirez

Made with

  • HTML / CSS (SCSS)

DIGITAL MONOPOLY PROPERTIES

Idea for using the details and summary tags.

Digital Monopoly Properties - GIF Demo

Author

  • Kyle

Made with

  • HTML / CSS

A DETAILED SUMMARY OF LIFE

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

A Detailed Summary of Life - GIF Demo

Author

  • Tony Banik

Made with

  • HTML / CSS (SCSS)

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.

Gracefully-degrading <details> Accordion - GIF Demo

Author

  • Keith Pickering

Made with

  • HTML / CSS (SCSS) / JavaScript

TOGGLE FUNCTION & SMOOTH SCROLL PURE HTML & CSS

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

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

Author

  • Kseso

Made with

  • HTML / CSS

ANIMATED COLLAPSE/EXPEND COMPONENT

Collapse/Expend with HTML details & summary.

Animated Collapse / Expend Component - GIF Demo

Author

  • Elior Tabeka

Made with

  • HTML / CSS (SCSS)