45+ HTML <details> & <summary> with CSS - Free Code + Demos

Menu with dropdown made only in css, with a line that follow the hover on the line

Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.

A details element with a custom arrow, no javascript

Messing around with a previous pen using details/summary to add additional features

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

Click one, and the others close.

Not supported IE & EDGE browsers.

Using details and summary to hide/reveal spoilers.

Using < details > and < summary > to create a recipe for Enchiladas

Codepen Challenge: https://codepen.io/challenges/2018/may/

Using details and summary to hide/reveal spoilers.

Responsive 1 Web Page with a "Split Screen" style by using only CSS. Try it in small screen.

Quick and dirty sketch of details accordion. Hope you enjoy. I'm sure its working properly on Safari/Chrome.

Posting this for the weekly Codepen challenge - my idea for using the Details and Summary tags

For the CodePen Challenge (May 2018). 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 cla...

Read More

all in pure CSS

Simple demo showing how to use the details and summary elements.

No Javascript for this pure CSS modal using native and HTML elements.

Exploring how to create collapsible cards with . It's not perfect but I got some CSS practice out of it. It doesn't work very well on Safari. The grid layout is not ideal for the empty space it creates on opening a card. It would be cool to be able to animate the closing of the details ele...

Read More

Saw the post on Smashing Magazine about expanding panels and I thought that might be worth looking into with clip-path, so here goes… Only seems to work in Firefox at the moment

Troquei as setas que vem por padrão com a tag details pelos sinais de + e - Para colocar os ícones em svg como background, usei o conversor que tem no link: https://css-tricks.com/using-svg/ Esses ajustes não são obrigatórios para fazer o accordeon funcionar

A case study of using details element for FAQ component.

Like CSS Tricks recommended; I made a menu with detais/summary and animated it as much as possible. Quite easy though

Answer a few queries for CSS-related concepts, in this neat quiz which uses details and summary elements. Project entry for the weekly #CodepenChallenge.