CSS Accordion – CodingNepal

Create Accordion in HTML CSS & JavaScript

CodingNepal — Mon, 23 May 2022 21:11:19 +0000

Hello friend, hope you are doing great. Today in this blog, you will learn to create a Responsive Accordion in HTML CSS, and JavaScript. There are lots of JavaScript Projects I have made to date, obviously accordion too, but in that accordion, there was no feature of auto close while we clicked on the second tab. Now in this accordion, I have added an auto-close feature.

An Accordion is a section that contains a header and description with open and close functionality.
Basically, the description of the accordion is in hidden status and we have to click on the header section to get a description. Every accordion’s header has its own description. The accordion can be made of various text content, for eg FAQ.

Let’s have a quick look at the given image of our accordion. There is a total of four tabs with different beautiful background colors. In every tab, there are different questions and icons. As you have seen on the second tab, it is in the opened state and the other three are in the closed state. If you click on every tab it will open and close also If one is in opened condition and you clicked on another tab the previously opened tab will automatically close and, the tab you have clicked will be opened.

You can the demo of this accordion and all the HTML CSS and JavaScript code that I have used to create this beautiful accordion.

Accordion in HTML CSS & JavaScript

All the HTML CSS and JavaScript code that I have used to create this accordion has been uploaded below before you jump into the source code, I would like to explain some basic points of this video tutorial on the accordion.

As you have seen on the video tutorial of your accordion. In the first, all the accordions were in closed form. When I clicked on the tab it opened and when I clicked on it a second time it was closed. While the accordion tab opened you saw some description of that accordion tab or section. When I leave the tab open and click on the other tab the previous tab automatically closed.

To make the UI design of this accordion I have used HTM and CSS and to open and close it and obviously auto close it, I have used Javascript code

I hope now you can build this accordion by using HTML CSS and JavaScript. If you are feeling difficulty making this accordion. I have provided all the source codes below.

Create Accordion [Source Code]

To get the following HTML CSS and JavaScript code for an Accordion. You need to create three files, HTML, CSS, and JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.





    
    
    
    
    
    

    
    

   Accordion in HTML CSS & JavaScript


    
        
            
                What do you mean by Accordion?
                
            

            
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
            
        

        
            
                What do you mean by Accordion?
                
            

            
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
            
        
        
            
                What do you mean by Accordion?
                
            

            
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
            
        
        
            
                What do you mean by Accordion?
                
            

            
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E3F2FD;
}
.accordion{
    max-width: 530px;
    width: 100%;
    background: #FFF;
    margin: 0 15px;
    padding: 15px;
    border-radius: 8px;
    box-shadow:  0 0 4px rgba(0,0,0,0.2);
}
.accordion .accordion-content{
    margin: 10px 0;
    border-radius: 4px;
    background: #FFF7F0;
    border: 1px solid #FFD6B3;
    overflow: hidden;
}
.accordion-content:nth-child(2){
    background-color: #F0FAFF;
    border-color: #CCEEFF;
}
.accordion-content:nth-child(3){
    background-color: #FFF0F3;
    border-color: #FFCCD6;
}
.accordion-content:nth-child(4){
    background-color: #F0F0FF;
    border-color: #CCCCFF;
}
.accordion-content.open{
    padding-bottom: 10px;
}
.accordion-content header{
    display: flex;
    min-height: 50px;
    padding: 0 15px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s linear;
}
.accordion-content.open header{
    min-height: 35px;
}
.accordion-content header .title{
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.accordion-content header i{
    font-size: 15px;
    color: #333;
}
.accordion-content .description{
    height: 0;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    padding: 0 15px;
    transition: all 0.2s linear;
}

 const accordionContent = document.querySelectorAll(".accordion-content");

accordionContent.forEach((item, index) => {
    let header = item.querySelector("header");
    header.addEventListener("click", () =>{
        item.classList.toggle("open");

        let description = item.querySelector(".description");
        if(item.classList.contains("open")){
            description.style.height = `${description.scrollHeight}px`; //scrollHeight property returns the height of an element including padding , but excluding borders, scrollbar or margin
            item.querySelector("i").classList.replace("fa-plus", "fa-minus");
        }else{
            description.style.height = "0px";
            item.querySelector("i").classList.replace("fa-minus", "fa-plus");
        }
        removeOpen(index); //calling the funtion and also passing the index number of the clicked header
    })
})

function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
        if(index1 != index2){
            item2.classList.remove("open");

            let des = item2.querySelector(".description");
            des.style.height = "0px";
            item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
        }
    })
}

If you face any difficulties while creating your Accordion or your code is not working as expected, you can download the source code files for this Accordion for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Responsive Accordion Menu using only HTML & CSS

CodingNepal — Mon, 12 Oct 2020 09:45:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Responsive Accordion Menu using only HTML & CSS. Previously I’ve shared a blog on how to create a Responsive Testimonials Section and now it’s time to create an Accordion that is mainly used while creating a FAQ section on websites.

An accordion menu is a vertically stacked list of headers or items and that can be clicked to show or hide content linked with them. In this program [Responsive Accordion Menu], there are shown four headers of an accordion, and the contents which are associated with them are hidden. By default, the content of the first header is shown and when you clicked on another tab, the content of that label is shown.

These accordion tabs are controlled with HTML , so we can only show the content of one header at one time that means when you expand the content of the second header, the first header content will be collapsed automatically. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Responsive Accordion Menu].

Video Tutorial of Responsive Accordion Menu

In the video, you have seen the accordion menu and how it’s content is expand and collapse. I used font awesome icons (+ and -) to inform or indicate the user that the content is currently collapsed or expanded. This is a pure CSS program and if you’re a beginner then you can also create this type of accordion and use on your projects and HTML pages.

This program is only possible with HTML and tag. You can also use to create this accordion but when you use a checkbox, you can’t collapse the previous expanded tab automatically when a new tab is clicked that means you have to hide or show content manually if you use a checkbox but in radio button, the previously opened tab automatically close when a new tab is opened.

Responsive Accordion Menu [Source Codes]

To create this program (Responsive Accordion Menu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.





    
    
    Responsive Accordion Menu | CodingNepal
    
    


  
    
    
      
      
        Accordion Heading One
        
      
      
        Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!
      
    

    
    
      
      
        Accordion Heading Two
        
      
      
        Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!
      
    

    
    
      
      
        Accordion Heading Three
        
      
      
        
        
          
          
            Sub Heading One
            
          
          
            Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?
          
        
        
        
          
          
            Sub Heading Two
            
          
          
            Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?
          
        
      
    

    
    
      
      
        Accordion Heading Four
        
      
      
        Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
::selection{
  background: rgb(0,123,255,0.3);
}
.wrapper{
  max-width: 600px;
  padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab{
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label{
  background: #007bff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  z-index: 99;
  transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
  background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label{
  border-radius: 3px 3px 0 0;
  background: #006fe6;
}
.wrapper label span{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
  font-size: 17px;
}
.parent-tab label .icon{
  position: relative;
  height: 30px;
  width: 30px;
  font-size: 15px;
  color: #007bff;
  display: block;
  background: #fff;
  border-radius: 50%;
  text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
  height: 27px;
  width: 27px;
}
.parent-tab label .icon i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before{
  content: '\f068';
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content{
  max-height: 0px;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 3px 3px;
  transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content{
  max-height: 100vh;
}
.tab-3 input:checked ~ .content{
  padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p{
  padding: 15px 20px;
  font-size: 16px;
}
.child-tab .sub-content p{
  font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}

That’s all, now you’ve successfully created a Responsive Accordion Menu using only HTML & CSS. If your code not work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded and you’ve extracted it.