45+ HTML <details> & <summary> with CSS - Free Code + Demos
Collection of 45+ HTML <details> & <summary> with CSS. All items are 100% free and open-source.
1. TreeView Details/Summary
Author: johnbarnitz (johnbarnitz)
Links: Source Code / Demo
Created on: June 5, 2020
Made with: HTML, CSS
2. Simple PureCss Dropdown Menu With Following Subnav
Menu with dropdown made only in css, with a line that follow the hover on the line
Author: Robert Borghesi (dghez)
Links: Source Code / Demo
Created on: February 17, 2015
Made with: HTML, SCSS
Tags: menu, dropdown, css, animation, translate
3. HTML Only Accordion
Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.
Author: Frederick Allen (frederickallen)
Links: Source Code / Demo
Created on: July 2, 2019
Made with: HTML, CSS
Tags: accordion, html5, no-javascript, html-only, expand collapse
4. Details Element With Custom Arrow
A details element with a custom arrow, no javascript
Author: Niels Voogt (NielsVoogt)
Links: Source Code / Demo
Created on: May 24, 2019
Made with: HTML, SCSS
5. Animated Details Element — Week 11/52
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
Created on: March 17, 2019
Made with: HTML, SCSS
Tags: details, accordion, pure-css, slide-down
6. Unit Testing Results Panel
Messing around with a previous pen using details/summary to add additional features
Author: Tony Banik (banik)
Links: Source Code / Demo
Created on: February 13, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: details, summary, unit testing, testing, failure
7. Teaching The Details Element With ... Details Elements!
Author: James Steinbach (jdsteinbach)
Links: Source Code / Demo
Created on: October 10, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge cpc-teach-html
8. HTML5 Details & Summary
Author: Jenning (jenning)
Links: Source Code / Demo
Created on: August 16, 2018
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cpc-teach-html, html5, details, summary, codepenchallenge
9. Details/Summary Animated Accordion
What it says on the tin. You can use this without JS and it works fine, except for the closing animation.
Author: Kam Black (kamblack)
Links: Source Code / Demo
Created on: July 16, 2018
Made with: HTML, SCSS, JS
Tags: details, summary, accordion, css
10. HTML Buddies <details> & <summary>: Bad Kids’ Jokes
Author: Jessica Paoli (skullface)
Links: Source Code / Demo
Created on: June 1, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge, cpc-details, cpc-skullface
11. HTML5 <details> & <summary> File Tree
Author: Isaione (Isaione)
Links: Source Code / Demo
Created on: May 21, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
12. Details & Summary
Author: Jenning (jenning)
Links: Source Code / Demo
Created on: August 16, 2018
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cpc-teach-html, html5, details, summary, codepenchallenge
13. <details> & <summary>: Hotel Room Selection
Click one, and the others close.
Author: Leena Lavanya (leenalavanya)
Links: Source Code / Demo
Created on: May 20, 2018
Made with: HTML, CSS, JS
Tags: cpc-details, codepenchallenge
14. Details Summary
Not supported IE & EDGE browsers.
Author: AMAN (adsingh14)
Links: Source Code / Demo
Created on: May 19, 2018
Made with: HTML, SCSS
Tags: codepenchallenge, css, details, cpc-details
15. Spoiler Alert With Details And Summary
Using details and summary to hide/reveal spoilers.
Author: Stephen Lee (abcretrograde)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-details
16. Recipe With Details And Summary
Using < details > and < summary > to create a recipe for Enchiladas
Author: Porgeee (GeorgePorgee)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, CSS
Tags: cpc-details, css, summary, details, codenewbie
17. Details & Summary
Author: Mesut Koca (koca)
Links: Source Code / Demo
Created on: May 16, 2018
Made with: HTML, SCSS
Tags: cpc-details, details, summary, tailwindcss
18. Details & Summary
Codepen Challenge: https://codepen.io/challenges/2018/may/
Author: yuanchuan (yuanchuan)
Links: Source Code / Demo, Codepen.io
Created on: May 16, 2018
Made with: HTML, CSS, JS
Tags: cpc-details
19. Details And Summary
Using details and summary to hide/reveal spoilers.
Author: Stephen Lee (abcretrograde)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-details
20. Responsive 1 Web Page Split Screen
Responsive 1 Web Page with a "Split Screen" style by using only CSS. Try it in small screen.
Author: Amli (uzcho_)
Links: Source Code / Demo
Created on: May 15, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-details, book, split screen, rwd
21. HTML Details And Summary
Author: Allistair Lee (allistairlee)
Links: Source Code / Demo
Created on: May 15, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-details
22. Details And Summary
Author: Vincent Danna (vinnywoo)
Links: Source Code / Demo
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
23. Details And Summary 3
Quick and dirty sketch of details accordion. Hope you enjoy. I'm sure its working properly on Safari/Chrome.
Author: Artem (artyschein)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: Haml, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: details, summary, css, codepenchallenge
24. Bucket List Destinations <details> CSS
Author: Yanely Ramirez (yxnely)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, SCSS
Tags: cpc-details, html, css, gradient
25. Digital Monopoly Properties
Posting this for the weekly Codepen challenge - my idea for using the Details and Summary tags
Author: Kyle (kaisle)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, CSS
Tags: codepenchallenge, details, summary, cpc-details, monopoly
26. A Detailed Summary Of Life <summary> CSS
Author: Tony Banik (tonybanik)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-details, details, summary, responsive
27. Gracefully Degrading Details Accordion
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
Author: Keith Pickering (keithpickering)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, SCSS, JS
Tags: cpc-details, codepenchallenge, accordion, vanillajs, es6
28. Toggle Function & Smooth Scroll Pure HTML & CSS
all in pure CSS
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: February 14, 2018
Made with: HTML, CSS
Tags: challenge, details, summary, cpc-details
29. Animated Collapse-Expend Component
Author: Elior Tabeka (eliortabeka)
Links: Source Code / Demo
Created on: November 3, 2017
Made with: HTML, SCSS
Tags: cpc-details, animated collapse/expand, codepenchallenge
30. Details And Summary Elements Demo
Simple demo showing how to use the details and summary elements.
Author: Matt West (matt-west)
Links: Source Code / Demo
Created on: March 5, 2014
Made with: HTML, CSS
Tags: html5, css3
31. HTML5 Details & Summary Accordion
Author: Lauren Clark (laurenclark)
Links: Source Code / Demo
Made with: HTML, SCSS
32. HTML5 Details & Summary Accordion - Hide/Show With No CSS Or JS!
Author: Lauren Clark (laurenclark)
Links: Source Code / Demo
Created on: September 18, 2019
Made with: HTML, SCSS
Tags: accordion, html5, no-css, no-js
33. Pure CSS Modal With Details And Summary
No Javascript for this pure CSS modal using native and HTML elements.
Author: Darinka Kostelnik (darinka_design)
Links: Source Code / Demo
Created on: August 25, 2019
Made with: HTML, CSS
Tags: css-only, popup, modal, pure-css
34. Collapsible Cards With <details>
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
Author: Raúl R Pearson (raulrpearson)
Links: Source Code / Demo
Created on: November 22, 2019
Made with: HTML, SCSS
Tags: details, summary, card, collapse
35. Animated <details> Expansion [Firefox Only…?]
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
Author: Christopher Kirk-Nielsen (chriskirknielsen)
Links: Source Code / Demo
Created on: November 19, 2019
Made with: HTML, SCSS
Tags: details, summary, clip-path, height transition
36. Accordeon Com HTML 5 Sem Js
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
Author: Nathalie Almeida (natdrabik)
Links: Source Code / Demo
Created on: August 9, 2019
Made with: HTML, CSS
Tags: accordeon, html5, details, summary, no-js
37. FAQ Via Details Element
A case study of using details element for FAQ component.
Author: Tomáš Kout (Kout)
Links: Source Code / Demo
Created on: August 22, 2019
Made with: HTML, CSS
Tags: details, summary, faq
38. <details> Off-canvas Menu With Css Animation
Like CSS Tricks recommended; I made a menu with detais/summary and animated it as much as possible. Quite easy though
Author: iGadget (iGadget)
Links: Source Code / Demo
Created on: March 24, 2019
Made with: HTML, SCSS
Tags: css, menu, off-canvas, details, summary
39. Summary And Detail Options - Native Accordion Or Inaccessible Bad?
Author: Holger Hellinger (polent)
Links: Source Code / Demo
Made with: HTML, Less
40. CSS Quiz
Answer a few queries for CSS-related concepts, in this neat quiz which uses details and summary elements. Project entry for the weekly #CodepenChallenge.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, CSS, JS
Tags: cpc-details, codepenchallenge, details, summary, quiz
41. Details & Summary Animation
Author: Mathieu Lajoinie (matlaoij)
Links: Source Code / Demo
Created on: May 21, 2018
Made with: HTML, SCSS
Tags: details, summary
More Awesome Lists:
Share: