Accordion in html and css

37 CSS Accordions

Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, etc. Update of March 2020 collection. 14 new examples.

Related Articles

Author

Links

Made with

About a code

CSS Only Semantic Animated Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion

A demonstation of what you can do with the details and summary elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Native HTML Details Element Styled via CSS

Implementation of an accordion-like component using only the details/summary native HTML element and CSS for styling. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion Flexbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion with Pure CSS and HTML

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion without Using JavaScript

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

HTML CSS Accordion without JavaScript / jQuery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion Menu With HTML & CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Simple accordion Menu with HTML And CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Accordion Menu HTML CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure HTML CSS Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Accordion Content

Air quotes card mode grid and accordion content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Accordions Pls

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

Author

Links

Made with

About the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Author

Links

Made with

About the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Author

Links

Made with

About the code

Accordion

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

Author

Links

Made with

About the code

ARIA Accessible Accordion

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

Author

Links

Made with

About the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Author

Links

Made with

About the code

Basic Accordion

Basic accordion in HTML, CSS and JS.

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2017

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2017

Expanding Horizontal Accordion In React

A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean
January 7, 2017

Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function.
Made by Eduardo Moreno
November 26, 2016

CSS Accordion

A simple solution for creating a pure CSS accordion with a CSS transition on the panel height, achieved by setting «max-height» of the accordion panel instead of «height».
Made by Matthew Scott
October 28, 2016

3D Accordion

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

Author

Источник

20+ Amazing Pure CSS Accordions [CSS Accordion Explained]

You have probably come across an accordion on a website already. They exist in many forms, but their use stays the same.

You can create a CSS accordion and make use of the benefits, in this article we will be exploring just that.

Accordions are a great way to display information in a certain section with a heading and save space. Usually, these accordions will collapse in some way, so another can be opened.

Let’s first understand what an accordion is and then go onto some real CSS accordion menus.

What Is A CSS Accordion?

A CSS Accordion is a web design element that allows you to toggle information when clicked. Usually seen in FAQ pages, an accordion tends to have a title and an icon and uses a transition to displays its content when clicked.

The main benefit of an accordion from the user experience point of view is that it provides an easy way to save space and avoid unnecessary links to other pages. It allows you to present the main information (titles) and only show the content the user requests when clicking on them.

An accordion can be made in pure CSS and provide great results. However, it is not uncommon to see more advanced accordions using JavaScript too. Especially if they need to share the state of the accordion to the web application in some way.

18 Amazing Accordion CSS Examples

Let’s jump into some examples and see what a real CSS accordion looks like, as I said before they come in different shapes and sizes, some are pure CSS and some require a little JavaScript.

1. Pure CSS Multi-Menu Accordion

We have two CSS accordion menus that showcase different features.

Often some accordion menus only allow one item open at a time but this example allows one or the other, to try it out for yourself.

Only requires the use of CSS, this one is quite advanced for not needing any JavaScript as it even has a close all button. It does this by using HTML checkboxes, something very clever.

2. Three dimensions Accordion Example

This is one of the most beautiful accordions examples we’ve found and it’s made in pure CSS only.

Originally created by Ahmad Emran, this accordion shows a more elaborated design paying attention to details and creating three dimensions look and feel.

3. Accordion Menu With A Header

This CSS accordion menu breaks out when you open up a section.

When you open an item, the other will close, meaning only one can be open at a time.

The header is a great feature because it allows you to use multiple on one page and have them titled.

4. HTML and CSS Accordion

This is a simple yet beautiful accordion using a subtle animation for the text when the item gets active.

It’s a great example of an accordion that you can use for the FAQs section of your page.

It allows multiple opened items, uses a slide animation, and includes arrow icons on each item that also get animated when the item gets opened or closed.

5. Simple Flat Theme Accordion Menu

This one uses JavaScript to pull off its effect.

With this accordion CSS example, we have a modern and clean design UI that has a smooth animation.

It also has a more advanced animation between each item when they are opened and closed.

6. Sliding CSS Accordion Menu

A simple CSS only accordion menu using a fast transition to toggle the submenus.

Only one item can be open at a time and it automatically closes any others items if they were open.

Clicking on the item again will also close an active item if it is open.

7. Sliding Accordion Menu

A simple but effective CSS accordion menu.

The animation it uses to slide between items is smooth and only one can be open at one time.

You could easily change this design with different colors and shadows.

8. Accordion Picture Slider

Another lovely example of a horizontal accordion picture slider.

This one evenly displays each picture, but once you hover over them, they display a larger version of the image.

Each image has a title and is clickable, and there is even a description.

Picture sliders are great and they have many different uses. We wrote an article on cool animated slider effects you may be interested in

9. Horizontal Picture Accordion

Not every CSS accordion menu has to house text or information.

This great example shows us how accordion can be used to creatively showcase images that could contain more elements.

This example also uses CSS filters as well, which get applied to the images.

10. CSS Accordion With Icons

A modern and minimal feeling Accordion CSS example that has icons.

The body of the accordion items is padded on each side, making for an appealing look.

Only built with HTML and CSS, no JavaScript. Also has a smooth animation between items.

11. FAQ Based Accordion Menu

CSS accordion menus are widely used for FAQ pages, they are an easy way to display lots of information without making the place look cluttered.

Each item can be conveniently opened or closed independently.

This accordion example is done in pure CSS, no JavaScript is required. You can easily adapt the styles and colors to your brand.

12. Zoom Animated Accordion Menu

A lovely example of a simple CSS accordion menu.

It uses a zoom-in and zoom-in-out animation for each item.

Each item can also be independently opened or closed.

13. Simple Pure CSS Accordion

A fresh-looking example of a simple CSS accordion menu.

Only one item can be open at once, there is a nice plus icon on the right which could be changed for something else more relevant.

Pure CSS, no JavaScript required for this one.

14. Pure CSS Accordion With Content

A more advanced CSS Accordion example menu that offers some great features.

The main selling point with this one is that it is pure CSS but allows you to have multiple inner accordions inside the main one, try expanding the text in each main item.

No JavaScript is required to get all this working.

15. Accordion Menu With Transition

A pure CSS accordion menu that has some cool features.

When you open or close an item, each item will transition to its open or close position.

This Accordion CSS example is nicely laid out with numbers and works well as an FAQ as you can see.

16. Big CSS Only Accordion Menu

A smoothly animated CSS accordion menu that has a hover effect on the headers of each item.

Each item can be set to a fixed height and scrolling can be activated when the content overflows.

Overall, a great example and built with pure CSS.

17. Multi-Coloured Accordion Menu With Icons

A fancy Accordion CSS example where each item can be opened or closed independently.

Comes with icons on the right side, which could easily be changed for something more fitting.

It has open and close arrows to indicate which item is open. And a smooth sliding animation.

18. Horizontal Sliding Accordion Menu

We’ve seen horizontal CSS accordion menus with pictures but what about text? Well, this example is just that.

Here we have a lovely simple example, slides left and right to open or close accordion items.

Good for lots of text and for keeping the information in a horizontal position on the webpage.

19. Fancy FAQ Based Accordion Menu

We know that accordion menus are great for FAQ pages.

This example is stunning and shows how an accordion menu can be used within a specific section on a webpage, this doesn’t have to be on a single page it could be located on a landing page.

The accordion menu itself has some nice subtle hover effects and they open quickly without any animation.

20. Picture Sliding CSS Accordion

A different way to showcase images that could contain more information, you would have to add that yourself.

However, the design here is very interesting and the animation between each item is smooth and engaging.

Pure CSS, no JavaScript as well.

Why Are Accordion Menus Useful?

Accordion Menus are useful because they help keep a design clean and modern. They help declutter space on a website by hiding text or information.

Something like an FAQ page, not every user is going to want to see all the text in one go, they may only need to see specific questions, and they can pick and choose which ones to open, that is why an accordion menu is perfect for this kind of use case.

Overall, they help improve the user experience and are convenient in displaying lots of information at once.

Related Articles

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/

Join 2,000+ readers and learn something new every month!

Источник