25 Free CSS Accordions

Easily add CSS Accordions to your website. No coding skills are required. Here we picked HTML, CSS files that are smartly coded with a clean structure and responsive design. Just copy the HTML code to the HTML file and the CSS code to the stylesheet, and you are done. Free for personal and commercial projects.

Web Designers use the concept of expandable and collapsible lists to make large sections of content into a more compatible readable section. The most widely used accordion menu designs found in modern websites are:

  1. Vertical Accordions
  2. Horizontal Accordions

What do these CSS accordions do? In simple terms, accordions on a website just show and hide content. CSS Accordions are like bookmarks; for example, on vertical accordions – On the left side, you put the index of topic contents, and on the right side, you read the content of that topic.

Vertical Accordions

Pure CSS Content Accordion

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

A perfectly simple accordion menu with vertical collapsible and expandable list. There is no jquery required for this css template.

Demo & Download

Flat Accordion CSS

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Flat Accordion CSS

Demo & Download

Collapsing Accordion Pure CSS

Coding: HTML/CSSResponsive: Yes

Dependencies: Font AwesomeSkill Required: Beginner

Copy-paste the code, and you are done. This simple accordion menu is made with pure CSS and HTML code with no Javascript to trigger anything.

Demo & Download

SCSS accordion tabs

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

Demo & Download

FAQ Accordion CSS

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

A faq accordion made for every type of website that will help your visitors engage with your website content. The CSS style is simple and easy to integrate. It uses a toggle switch function for expanding the tab list.

Demo & Download

Swanky little accordion list

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

This is a beautiful HTML accordion with a clean CSS cubic-bezier animation to collapse/expand the list. By clicking the tab menu, it opens the content and keeps it open until it is clicked again. This CSS expand collapse list acts like a toggle switch.

Demo & Download

CSS + HTML only Accordion Element

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

Demo & Download

Funky Pure CSS Accordion

Coding: HTML/CSSResponsive: Yes

Dependencies: IoniconsSkill Required: Beginner

Demo & Download

Accordion FAQ

Coding: HTML/CSSResponsive: Yes

Dependencies: IoniconsSkill Required: Beginner

Demo & Download

Free Simple sass/jQuery Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

CSS Responsive Animated Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

Smooth Accordion Dropdown Menu

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuery, Font AwesomeSkill Required: Beginner

smooth accordion css

Demo & Download

Basic Menu List Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

Multi-level Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Advanced

Multi-level Accordion

Demo & Download

Simple Accordion JS

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

Accordion Vanilla Js

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Advanced

Demo & Download

JS Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Advanced

Demo & Download

Accessible Accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

3D accordion

Coding: HTML/CSS/JSResponsive: Yes

Dependencies: jQuerySkill Required: Beginner

Demo & Download

Horizontal Accordions

Pure CSS Tabs

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

This css tab menu can be integrated onto your website with ease . One of the fluid css tabs with no jquery or javascript i have found today.

Demo & Download

Horizontal CSS Tab menu

Coding: HTML/CSSResponsive: Yes

Dependencies: NoSkill Required: Beginner

An interesting tab menu with added images and icons with additional styles and interest to the viewer. This download includes no jQuery as the code is designed with pure CSS and html elements.

Demo & Download

Free Pure CSS Horizontal Accordion

Coding: HTML/CSSResponsive: Yes

Dependencies: GenericonsSkill Required: Beginner

I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.

Demo & Download

Bootstrap 4.1 FAQ tabs and accordions

Coding: HTML/CSSResponsive: Yes

Dependencies: BootstrapSkill Required: Beginner

A combination of vertical and horizontal styles for content management or admin dashboard.

Demo & Download

Pure CSS accordion

Coding: HTML/CSSResponsive: Yes

Dependencies: BootstrapSkill Required: Beginner

Demo & Download

Leave a Comment