50 Beautiful CSS Accordions - (Open Source Code Included)

CSS3 accordion slider with Transitions and Flexbox

This Pen will collapse without the need for any kind of JavaScript

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

December 2018 Challenge, Week 4: Find some motivation with these uplifting quotes inspired by air in our last CodePen Challenge of the year 🌬 This ZingGrid features card mode, expandable accordion content, and paging.

Accordion tabs without js. This tabs have responsive design.

A simple accordion that can be used by both mouse and keyboard-only users.

Minimal FAQ accordion made with vanilla JavaScript.

Bootstrap 3 collapse redesigned to match Material Design concept with ability to add icons on show/hide with smooth transition by adding an active class to the panel heading on show/hide.

Version 2.0: - Redesigned with SCSS and smooth animation. - Added a tab "close" in "open one" option to close other tab. Acordeon made with just CSS. Based on checkbox input+label trick to active tabs.

A quick alternative to the standard 'Accordion' pattern, built completely with React. This was my first jump into ReactJS, so any feedback is welcome.

Image accordion only with CSS and color filters using the rgba() function

Another pure CSS UI Piece here using radio buttons for the active states

Responsive Animated SCSS Accordion with some Text-Background-Clipping and Linear-Background Overlay (just for the demo)

Simple jQuery accordion with 3D folding paper effect. Paintings used for this pen: "Departure from Wilanów of John III Sobieski and Marysieńka" by Józef Brandt woodcut Shiba Zôjôji from series "12 views of Tokyo" by Hasui Kawase watercolor painting "The Great Piece of Turf" by Albrech...

Read More

Flat Accordion :D Free PSD here : https://www.behance.net/gallery/35967755/flat-Accordion-PSD-HTML

Created and designed (in browser) a pure HTML and CSS expandable accordion for fun. I tried to think outside of the box when designing this (no pun intended). I used a (hidden) checkbox to toggle the expanding and collapsing of each panel. I am not fully satisfied with the animations, but...

Read More

Originally when I first made this I just wanted to make an animated accordion with mostly CSS and some simple javascript. I've since added Aria roles and fixed up that Javascript to work better.

Here's another little CSS creation using the 'Label for' trick. I plan on maybe making a few more of these in different styles but for the time being i think its a nice 'non javascript' addition to any user interface.

Read the copy in the accordion sections for some info about how this was made.

Responsive Animated SCSS Accordion with some Text-Background-Clipping and Linear-Background Overlay (just for the demo)

Inspired by Ch3mical.com. I saw this accordion at Paul Kelley's website. He had used jQuery and images to achieve the effect. I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.

This accordion profile is for get invitation from http://dribbble.com. However some credits are mentioned below: Credits: Nice toggle using jQuery Beautiful icons from FontAwesome Awesome gradient background from UI Gradients Google font are available at Roboto and Pacifico I'm g...

Read More

Based on the shot for Focus Lab: https://dribbble.com/shots/2310611-Feature-Slider-Motion

Testing gundam profiles on accordion design with flexbox and transitions.

CSS only! No complicated JavaScript, Fonts etc.

An HTML and CSS only accordion fully responsive, adjusts gracefully to the size of the viewing port.

It's very possible and very easy to build a beautiful and accessible accordion using the dialog. Documentation for : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details Inspiration: https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-...

Read More

unfinished.