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 …

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



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 CSS accordion examples which are available on Codepen.



#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



List of css accordion



You may like these also:)

  1. ? Best 25+ Stunning CSS Fire Animations 2021
  2. 100% Free Best CSS Card Design For Your Website
  3. How to build a JavaScript Random Quote Generator

Print Share Comment Cite Upload Translate
APA
Stackfindover | Sciencx (2024-03-28T12:46:47+00:00) » 15 Best CSS Accordion Designs You’ve Never ? Seen Before. Retrieved from https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/.
MLA
" » 15 Best CSS Accordion Designs You’ve Never ? Seen Before." Stackfindover | Sciencx - Thursday July 22, 2021, https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/
HARVARD
Stackfindover | Sciencx Thursday July 22, 2021 » 15 Best CSS Accordion Designs You’ve Never ? Seen Before., viewed 2024-03-28T12:46:47+00:00,<https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/>
VANCOUVER
Stackfindover | Sciencx - » 15 Best CSS Accordion Designs You’ve Never ? Seen Before. [Internet]. [Accessed 2024-03-28T12:46:47+00:00]. Available from: https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/
CHICAGO
" » 15 Best CSS Accordion Designs You’ve Never ? Seen Before." Stackfindover | Sciencx - Accessed 2024-03-28T12:46:47+00:00. https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/
IEEE
" » 15 Best CSS Accordion Designs You’ve Never ? Seen Before." Stackfindover | Sciencx [Online]. Available: https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/. [Accessed: 2024-03-28T12:46:47+00:00]
rf:citation
» 15 Best CSS Accordion Designs You’ve Never ? Seen Before | Stackfindover | Sciencx | https://www.scien.cx/2021/07/22/15-best-css-accordion-designs-youve-never-%f0%9f%91%80-seen-before/ | 2024-03-28T12:46:47+00:00
https://github.com/addpipe/simple-recorderjs-demo