37 CSS Accordions


Assortment of free HTML and CSS accordion code examples: horizontal, vertical, easy, responsive, animated, and many others. Replace of March 2019 assortment. four new examples.

  1. Horizontal Accordions
  2. Vertical Accordions
  1. CSS Accordion Menus
  2. Bootstrap Accordions
  3. jQuery Accordions
  4. React Accordions
  5. HTML <details> & <summary> with CSS
Demo image: Pure CSS Accordion

Creator

  • Ivan Bogachev

In regards to the code

Pure CSS Accordion

Pure CSS horizontal accordion with rework and box-shadow results.

Demo image: Accordion Image Gallery

Creator

  • Stefan C.

In regards to the code

Accordion Picture Gallery

CSS accordion picture gallery. Much less code and nice animation impact.

Demo image: CSS3 accordion slider with Transitions and Flexbox

Creator

  • fox_hover

In regards to the code

CSS3 Accordion Slider With Transitions And Flexbox

CSS3 accordion with 5 completely different results.

Demo Image: Expanding Horizontal Accordion in React
Demo Picture: Increasing Horizontal Accordion In React

Increasing Horizontal Accordion In React

A fast various to the usual ‘Accordion’ sample, constructed utterly with React.
Made by Sean
January 7, 2017

Demo Image: Pure CSS Accordion
Demo Picture: Pure CSS Accordion

Pure CSS Accordion

Picture accordion solely with CSS and shade filters utilizing the rgba() operate.
Made by Eduardo Moreno
November 26, 2016

Demo image: Horizontal Accordion

Creator

  • Miles Manners

In regards to the code

Horizontal Accordion

Full web page horizontal accordion.

Demo Image: Responsive Accordion
Demo Picture: Responsive Accordion

Responsive Accordion

Responsive accordion (background photographs).
Made by Michael Ferry
October 1, 2015

Demo Image: Accordion Navigation
Demo Picture: Accordion Navigation

Accordion Navigation

No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015

Demo Image: Flexbox Accordion
Demo Picture: Flexbox Accordion

Flexbox Accordion

Easy horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014

Demo image: CSS Vertical Accordion

Creator

  • Monica Wheeler

In regards to the code

CSS Vertical Accordion

CSS vertical accordion for regularly requested questions.

Demo image: Accordions Pls

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel (Vue.js)

In regards to the code

Accordions Pls

Vertical accordion with HTML, CSS and JS (Vue.js).

Demo image: Accordion With Input Edit

Creator

  • Jorge Brunetto

In regards to the code

Accordion With Enter Edit

Pure CSS accordion with enter edit.

Demo image: Animated CSS Accordion

Creator

  • Elior Tabeka

In regards to the code

Animated CSS Accordion

Animated collapse/expend part.

Demo image: Accordion In Js

Creator

  • Davide Cantelli

In regards to the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Demo image: Accordion 2.0

Creator

  • Stelios Baglaridis

In regards to the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Demo image: Accordion

Creator

  • Lewis Briffa

Made with

  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)

In regards to the code

Accordion

Accordion JS performance permitting you to set the animation velocity of the toggle. You even have the choice of with the ability to have only one accordion merchandise open at anyone given time.

Demo image: ARIA Accessible Accordion

Creator

  • Kiri Egington

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

In regards to the code

ARIA Accessible Accordion

A easy accordion that can be utilized by each mouse and keyboard-only customers.

Demo image: FAQ Accordion

Creator

  • Katherine Kato

In regards to the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Demo image: Basic Accordion

Made with

  • HTML
  • CSS/SCSS (Animate.css)
  • JavaScript (jQuery.js)

In regards to the code

Primary Accordion

Primary accordion in HTML, CSS and JS.

Demo Image: Simple Accordion Concept
Demo Picture: Easy Accordion Idea

Easy Accordion Idea

HTML, CSS and JavaScript easy accordion idea.
Made by Kyle Brumm
March 24, 2017

Demo Image: Funky Pure CSS Accordion
Demo Picture: Funky Pure CSS Accordion

Funky Pure CSS Accordion

One other pure CSS UI Piece right here utilizing radio buttons for the energetic states.
Made by Jamie Coulter
March 19, 2017

Demo Image: CSS Accordion
Demo Picture: CSS Accordion

CSS Accordion

A easy answer for making a pure CSS accordion with a CSS transition on the panel peak, achieved by setting “max-height” of the accordion panel as a substitute of “peak”.
Made by Matthew Scott
October 28, 2016

Demo Image: 3D Accordion
Demo Picture: 3D Accordion

3D Accordion

Easy accordion with 3D folding paper impact in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2016

Demo image: Material Design Accordion - Bootstrap 3

Creator

  • Shehab Eltawel

Made with

  • HTML
  • CSS (Bootstrap.js)
  • JavaScript (jQuery.js, Bootstrap.js)

In regards to the code

Materials Design Accordion – Bootstrap 3

Bootstrap Three collapse redesigned to match Materials Design idea with potential so as to add icons on present/conceal with clean transition by including an energetic class to the panel heading on present/conceal.

Demo Image: Flat Accordion
Demo Picture: Flat Accordion

Flat Accordion

Flat accordion in HTML, CSS and JavaScript.
Made by Soufiane Abid
April 12, 2016

Demo Image: Pure HTML And CSS Accordion
Demo Picture: Pure HTML And CSS Accordion

Pure HTML And CSS Accordion

Created and designed (in browser) a pure HTML and CSS expandable accordion for enjoyable.
Made by Chris Ota
January 21, 2016

Demo Image: CSS Responsive Animated Accordion
Demo Picture: CSS Responsive Animated Accordion

CSS Responsive Animated Accordion

HTML and CSS responsive animated accordion.
Made by Chris Wright
January 19, 2016

Demo Image: Swanky Little Accordian List
Demo Picture: Swanky Little Accordian Checklist

Swanky Little Accordian Checklist

Right here’s one other little CSS creation utilizing the ‘Label for’ trick.
Made by Jamie Coulter
February 22, 2015

Demo Image: CSS + HTML Only Accordion Element
Demo Picture: CSS + HTML Solely Accordion Component

CSS + HTML Solely Accordion Component

Learn the copy within the accordion sections for some information about how this was made.
Made by Alex Bergin
April 18, 2014

Demo Image: Responsive Animated SCSS Accordion
Demo Picture: Responsive Animated SCSS Accordion

Responsive Animated SCSS Accordion

Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.
Made by MrPirrera
December 11, 2014



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *