TOP 25 HTML

&

with CSS

DETAILS ELEMENT

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

ANIMATED DETAILS ELEMENT

DETAILS ELEMENTS EXAMPLE

HTML5 DETAILS & SUMMARY

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

DETAILS/SUMMARY ANIMATED ACCORDION

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

HTML <DETAILS> & <SUMMARY>

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

DETAILS & SUMMARY

Experiment with details & summary HTML tags.

<DETAILS> AND <SUMMARY>: HOTEL ROOM SELECTION

Click one, and the others close.

DETAILS + SUMMARY

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

SPOILER ALERT WITH <DETAILS> AND <SUMMARY>

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

RECIPE WITH <DETAILS> AND <SUMMARY>

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

CODE SNIPPET REPOSITORY

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

DETAILS & SUMMARY

Frequently asked questions with HTML details & summary tags.

DETAILS & SUMMARY

Code example with HTML details and summary tags.

DETAILS AND SUMMARY

HTML frequently asked questions layout.

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.

HTML DETAILS AND SUMMARY

Simple frequently asked questions template.

<DETAILS> AND <SUMMARY>

Simple example with HTML details and sammary.

<DETAILS> AND <SUMMARY>

Quick and dirty sketch of details accordion.

BUCKET LIST DESTINATIONS

Yet another example with HTML details and summary tags.

DIGITAL MONOPOLY PROPERTIES

Idea for using the details and summary tags.

A DETAILED SUMMARY OF LIFE

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

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.

TOGGLE FUNCTION & SMOOTH SCROLL PURE HTML & CSS

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

ANIMATED COLLAPSE/EXPEND COMPONENT

Collapse/Expend with HTML details & summary.