Accordions

36 snippets

Browse Accordions examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-accordions

Snippets(36)

ARIA Accessible Accordion
A aria accessible accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion
A accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion
A accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion
A accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion
A accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion 2.0
A accordion 2.0 built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion Content
A accordion content built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion Flexbox
A accordion flexbox built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion In Js
A accordion in js built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion Menu With HTML & CSS Only
A accordion menu with html & css only built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Accordion with Pure CSS and HTML
A accordion with pure css and html built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion without Using JavaScript
A accordion without using javascript built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordion/Collapse with Pure CSS
A accordion/collapse with pure css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Accordions Pls
A accordions pls built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Basic Accordion
A basic accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Only Semantic Animated Accordion
A css only semantic animated accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS-only Accordion with Reveal Animation
A css-only accordion with reveal animation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Expanding Cards
A expanding cards built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
FAQ Accordion
A faq accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
FAQ Accordion
A faq accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
HTML+CSS Only Accordion
A html+css only accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Native HTML Details Element Styled via CSS
A native html details element styled via css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
No JavaScript Simple Accordion
A no javascript simple accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Only HTML Accordion (No JS)
A only html accordion (no js) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Accordion
A pure css accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Accordion with Radio Buttons
A pure css accordion with radio buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Pure HTML CSS Accordion
A pure html css accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure HTML+CSS Accordion
A pure html+css accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Simple Image Accordion
A simple image accordion built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Simple accordion Menu with HTML And CSS
A simple accordion menu with html and css built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Expandable Wallet Payment Card
A expandable wallet payment card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Expandable UI, Pure CSS State, Smooth Animation, :has() Selector
Responsive
Yes
3D Parallax Navigation with 'Fisheye' Hover Effect (CSS-Only)
A 3d parallax navigation with 'fisheye' hover effect (css-only) built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Advanced
Features
3D Transforms, CSS Variables, No JavaScript
Animated Grid Tracks with :has()
A animated grid tracks with :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Grid, CSS :has() selector
Difficulty
Intermediate
Features
Expanding grid tracks, Hover-triggered animations, Blend mode effects
Responsive
Yes
Apple-Style Smooth Animated Accordion
A apple-style smooth animated accordion built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, SCSS
Difficulty
Intermediate
Browser support
Chrome 131+, Edge 131+
Features
Zero-JS, Fluid Height, Exclusive Expansion
Responsive
Yes
CSS Accordion with Custom Animated Arrows
A css accordion with custom animated arrows built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Features
Zero-JS, Animated Arrows, Native HTML5
Responsive
Yes
Pure CSS Animated Details Accordion
A pure css animated details accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 129+, Edge 129+
Features
Smooth Height Transition, Zero JavaScript, Discrete Animations, Exclusive Expansion
Responsive
Yes

Snippets(36)

related hubs