Details + Summary

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

Made with: HTML,CSS (SCSS)

View Code

Spoiler Alert With <Details> And <Summary>

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

Made with: HTML,CSS

View Code

Recipe With <Details> And <Summary>

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

Made with: HTML,CSS

View Code

Code Snippet Repository

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

Made with: HTML,CSS (SCSS),JavaScript

View Code

Details & Summary

Frequently asked questions with HTML details & summary tags.

Made with: HTML,CSS (SCSS)

View Code

Details & Summary

Code example with HTML details and summary tags.

Made with: HTML,CSS,JavaScript

View Code

Details And Summary

HTML frequently asked questions layout.

Made with: HTML,CSS (PostCSS)

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

Made with: HTML,CSS

View Code

Html Details And Summary

Simple frequently asked questions template.

Made with: HTML,CSS,JavaScript

View Code

<Details> And <Summary>

Simple example with HTML details and sammary.

Made with: HTML (Haml),CSS (Sass)

View Code

<Details> And <Summary>

Quick and dirty sketch of details accordion.

Made with: HTML (Haml),CSS (Sass),JavaScript (Babel)

View Code

Bucket List Destinations

Yet another example with HTML details and summary tags.

Made with: HTML,CSS (SCSS)

View Code

Digital Monopoly Properties

Idea for using the details and summary tags.

Made with: HTML,CSS

View Code

A Detailed Summary Of Life

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

Made with: HTML,CSS (SCSS)

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

Made with: HTML,CSS (SCSS),JavaScript

View Code

Toggle Function & Smooth Scroll Pure Html & Css

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

Made with: HTML,CSS

View Code

Animated Collapse/Expend Component

Collapse/Expend with HTML details & summary.

Made with: HTML,CSS (SCSS)

View Code