15 Best CSS Accordion Designs You've Never ? Seen Before

Hello Friends, I have listed over 15 best css accordion designs made with HTML, CSS, and JS. Check out these excellent accordion examples which are available on Codepen.

Awesome Accordion Design 2021 step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating a simple accordion design. In the next step, you will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create accordion with css only</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;400&display=swap" rel="stylesheet">
</head>
<body>
   
</body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

 <div class="accordion_outer">
        <div class="container">
            <details>
                <summary>Section 1</summary>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </details>
            <details>
                <summary>Section 2</summary>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </details>
            <details>
                <summary>Section 3</summary>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </details>
            <details>
                <summary>Section 4</summary>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </details>
        </div>
    </div>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
html,body {
  background: #dae9f9;
}

.container {
  width: 95%;
  max-width: 1140px;
  margin: auto;
}
.accordion_outer {
  padding: 50px 0;
}
details {
  background: #f2f4f6;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 10px;
  cursor: pointer;
}
.details {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
  cursor: auto;
}

#Final Result

If you want source code you can download it from the below button

Download Code

Best Collection of Accordion design

In this collection, I have listed over 10+ best accordion designs made with HTML, CSS and JavaScript. Check out these awesome accordion examples which are available on Codepen.

#1 Accordion in vanilla js

Accordion design using HTML CSS and JavaScript, which was developed by Davide Cantelli. Moreover, you can customize it according to your wish and need.

Author:	Davide Cantelli
Created on:	October 18, 2017
Made with:	HTML, CSS(SCSS) & JavaScript
Demo Link:	Source Code / Demo
Tags:	vanilla js accordion

#2 Pure CSS Accordion ^2.0

Simple Accordion using HTML and CSS only, which was developed by Raúl Barrera. Moreover, you can customize it according to your wish and need.

Author:	Raúl Barrera
Created on:	December 21, 2015
Made with:	HTML & CSS
Demo Link:	Source Code / Demo
Tags:	Pure CSS Accordion

#3 Frontend Mentor | FAQ Accordion Card

FAQ Accordion Card Design using HTML, CSS and jQuery, which was developed by VikaZaichuk. Moreover, you can customize it according to your wish and need.

Author:	VikaZaichuk
Created on:	June 8, 2021
Made with:	HTML, CSS & jQuery
Demo Link:	Source Code / Demo
Tags:	FAQ Accordion Card

#4 Multi theme accordion

Multi theme accordion Design which was developed by bk. Moreover, you can customize it according to your wish and need.

Author:	bk
Created on:	May 24, 2021
Made with:	HTML, CSS(SCSS) & JavaScript
Demo Link:	Source Code / Demo
Tags:	Multi theme accordion

#5 Bootstrap 5.0 accordion

Bootstrap 5.0 accordion Design using HTML and CSS, which was developed by Bobby Davis. Moreover, you can customize it according to your wish and need.

Author:	Bobby Davis
Created on:	May 6, 2021
Made with:	HTML and CSS
Demo Link:	Source Code / Demo
Tags:	Bootstrap 5.0 accordion

#6 JavaScript Accordion by Coding Artist

Simple JavaScript Accordion Design using HTML, CSS and JavaScript, which was developed by Coding Artist. Moreover, you can customize it according to your wish and need.

Author:	Coding Artist
Created on:	May 29, 2021
Made with:	HTML, CSS and JavaScript
Demo Link:	Source Code / Demo
Tags:	Simple JavaScript Accordion

#7 Awesome Frequently Asked Questions Accordion

Simple Accordion Design using HTML, CSS and JavaScript, which was developed by Solygambas. Moreover, you can customize it according to your wish and need.

Author:	Solygambas
Created on:	January 13, 2021
Made with:	HTML, CSS and JavaScript
Demo Link:	Source Code / Demo
Tags:	Simple Accordion

#8 Multi level Accordion

Multi level Accordion using HTML, CSS and jQuery, which was developed by Gab Shirohige. Moreover, you can customize it according to your wish and need.

Author:	Gab Shirohige
Created on:	April 1, 2018
Made with:	HTML, CSS and jQuery
Demo Link:	Source Code / Demo
Tags:	Multi level Accordion

#9 Sliding multi level accordion

Sliding multi level accordion using HTML and CSS, which was developed by Alex Devero. Moreover, you can customize it according to your wish and need.

Author:	Alex Devero
Created on:	October 30, 2015
Made with:	HTML and CSS
Demo Link:	Source Code / Demo
Tags:	Sliding multi level accordion

#10 Simple Bootstrap Accordion

Simple Bootstrap Best Accordion using HTML, CSS and jQuery, which was developed by Maruf-Al Bashir. Moreover, you can customize it according to your wish and need.

Author:	Maruf-Al Bashir
Created on:	July 13, 2020
Made with:	HTML, CSS and jQuery
Demo Link:	Source Code / Demo
Tags:	Simple Bootstrap Accordion

#11 Simple jQuery Accordion

Simple jQuery Accordion using HTML, CSS and jQuery, which was developed by Алина. Moreover, you can customize it according to your wish and need.

Author:	Алина
Created on:	May 28, 2020
Made with:	HTML, CSS and jQuery
Demo Link:	Source Code / Demo
Tags:	Simple jQuery Accordion

#12 Creative jQuery Accordion

Creative jQuery Accordion using HTML, CSS and jQuery, which was developed by EvelynYang. Moreover, you can customize it according to your wish and need.

Author:	EvelynYang
Created on:	April 29, 2020
Made with:	HTML, CSS and jQuery
Demo Link:	Source Code / Demo
Tags:	Creative jQuery Accordion

#13 CSS Horizontal Accordion

Horizontal Accordion design which was developed by Ryan Arnell. Moreover, you can customize it according to your wish and need.

Author:	Ryan Arnell
Created on:	April 10, 2014
Made with:	HTML and CSS
Demo Link:	Source Code / Demo
Tags:	Horizontal Accordion

#14 Pure SCSS Accordion tabs

Pure SCSS best accordion tabs design which was developed by Natalia. Moreover, you can customize it according to your wish and need.

Author:	Natalia
Created on:	September 25, 2018
Made with:	HTML and CSS
Demo Link:	Source Code / Demo
Tags:	accordion tabs

#15 Accordion Component With the CSS Checkbox

Accordion Component With the CSS Checkbox using HTML and CSS, which was developed by Envato Tuts+. Moreover, you can customize it according to your wish and need.

Author:	Envato Tuts+
Created on:	November 7, 2019
Made with:	HTML and CSS
Demo Link:	Source Code / Demo
Tags:	checkbox accordion

Awesome Accordion Design 2021 step by step

Step 1 — Creating a New Project

Step 2 — Setting Up the basic structure

Step 3 — Adding Styles for the Classes

#Final Result

If you want source code you can download it from the below button

Best Collection of Accordion design

#1 Accordion in vanilla js

#2 Pure CSS Accordion ^2.0

#3 Frontend Mentor | FAQ Accordion Card

#4 Multi theme accordion

#5 Bootstrap 5.0 accordion

#6 JavaScript Accordion by Coding Artist

#7 Awesome Frequently Asked Questions Accordion

#8 Multi level Accordion

#9 Sliding multi level accordion

#10 Simple Bootstrap Accordion

#11 Simple jQuery Accordion

#12 Creative jQuery Accordion

#13 CSS Horizontal Accordion

#14 Pure SCSS Accordion tabs

#15 Accordion Component With the CSS Checkbox

You may like these also:

Table of Contents

Leave a Comment Cancel reply

Reach out to us for a consultation.

15 Best CSS Accordion Designs You’ve Never ? Seen Before

Awesome Accordion Design 2021 step by step

Step 1 — Creating a New Project

Step 2 — Setting Up the basic structure

Step 3 — Adding Styles for the Classes

#Final Result

If you want source code you can download it from the below button

Best Collection of Accordion design

#1 Accordion in vanilla js

#2 Pure CSS Accordion 2.0

#3 Frontend Mentor | FAQ Accordion Card

#4 Multi theme accordion

#5 Bootstrap 5.0 accordion

#6 JavaScript Accordion by Coding Artist

#7 Awesome Frequently Asked Questions Accordion

#8 Multi level Accordion

#9 Sliding multi level accordion

#10 Simple Bootstrap Accordion

#11 Simple jQuery Accordion

#12 Creative jQuery Accordion

#13 CSS Horizontal Accordion

#14 Pure SCSS Accordion tabs

#15 Accordion Component With the CSS Checkbox

You may like these also:

Table of Contents

Leave a Comment Cancel reply

Reach out to us for a consultation.

#2 Pure CSS Accordion ^2.0