Content Organization with Animated FAQ Accordion in 2021 !🔥|| CSS JS
Tags: codepen, css, webdev, productivity
Published: 2020-11-17 19:54:38

If **Users** can't find what they want in a website in the **First 3 Seconds**, then they're **Leaving.**

In order to prevent this misfortune, we can organize our FAQ/contents in an **Animated Accordion.** Like this one below 👇

This Blog is About Building A FAQ Accordion in 2021 using CSS & JS. So, Let's start the Journey 💪

#**Codepen 🔥**

**You can find the full code on [Codepen](https://codepen.io/joyshaheb/pen/WNxmMmY)**

{% codepen https://codepen.io/joyshaheb/pen/WNxmMmY %}



#**Youtube Tutorial 🔥**
####**[If this post is difficult for you then see Step by step Tutorial on Youtube 🔥](https://www.youtube.com/watch?v=A8_N1l5bIT0&t=70s)**
{% youtube A8_N1l5bIT0 %}



## Table Of Contents 🔥
   * [HTML](#chapter-1)
   * [Rules Setup](#chapter-2)
   * [SCSS](#chapter-3)
   * [JavaScript](#chapter-4)
   * [Conclusion](#chapter-5)



#**HTML :** <a name="chapter-1"></a>

We're gonna create 4 div inside a parent div with class name container. Let's start small with 1 item.
Like this 👇

```HTML
<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">  </div>

</div>

```
Next up, setup 2 siblings with class-name .accordion & .panel inside .item-1 class


```HTML
<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">
    <div class="accordion">  </div>
    <div class="panel">  </div>
  </div>

</div>

```

Inside .accordion, create 2 siblings- .title & .icon 
Inside .icon, write "+"
Inside .title, write your content, *anything u wish.
Inside .panel, set some dummy text.

```HTML
<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">
    <div class="accordion">
      <div class="title">How to Install?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
       </p>
    </div>
  </div>

</div>

```

###Like this, create 4 sibling div, and end up the HTML Part. 

```HTML
<div class="container">
  <h1>Frequently Asked Questions</h1>
  
  <div class="item-1">
    <div class="accordion">
      <div class="title">How To Install ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>
  
  
  <div class="item-2">
    <div class="accordion">
      <div class="title">How To Uninstall ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>
  
  
  <div class="item-3">
    <div class="accordion">
      <div class="title">How To Upgrade ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>
  
  
  <div class="item-4">
    <div class="accordion">
      <div class="title">Refund Policy ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>
  
  
</div>

```




#**Rules Setup :** <a name="chapter-2"></a>

In this part, 
We're gonna pick "Poppins" as the font-family,
Create a template using a mixin,
Create some commonly used variables, and 
Change default styles by the * selector.

```SCSS

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

//*** Template of the CSS Flexbox Model******

@mixin flex($jus,$ali){
  display: flex;
  justify-content:$jus;
  align-items:$ali;
}

// Commonly used Values/colors as variables

$bgc: #000;
$color-1: #fff;
$color-2: red;

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  body{
    @include flex(center,null);
    width:100%;
    min-height:100vh;
    background-color: $bgc;
    color: $color-1;
    font-family: 'Poppins';
  }
}

```

#**SCSS :** <a name="chapter-3"></a>

First, style the .container 

```SCSS
.container{
  width:80%;
  
  //***Media Query to make the Accordion look good on larger screens.
  
  @media (min-width: 800px){
    width:45%;
  }
  
  h1{
    text-align:center;
    font-weight:300;
    margin: 50px 0;
  }
}

```

Then, style the .accordion

```SCSS
// Targetting & styling all .accordion classes

.accordion{
  @include flex(space-between,null);
  border-bottom: 2px solid $color-2;
  font-size: 22px;
  letter-spacing: 5px;
  // text-transform: uppercase;
  font-weight: 500;
  cursor:pointer;
  transition: all .3s ease;
  &:hover{
    color: $color-2;
  }
}

```

Next up, style the .panel

```SCSS
// Targetting & styling all .panel classes

.panel{
  max-height: 0px;
  overflow:hidden;
  transition: all 1s ease;
  p{
    margin: 10px 0px 10px 20px;
    text-align:justify;
  }
}

```

Finally, create an extra .open class to be used in JS

```SCSS
// This is an extra class. It will be used inside javascript.
// it's main task is to change color of accordion title from white to red.

.open{
  color : $color-2;
}
```




#**JavaScript :** <a name="chapter-4"></a>

Explanation is given as comments on the code. If you don't understand this part, then scroll to top, and see the youtube tutorial.

```Javascript

// Targetting all the .accordion classes
let acc = document.getElementsByClassName('accordion')

// console.log(acc);

// Creating a loop to add eventListener to all .accordion classes

for(let i=0;i<acc.length;i++){
  acc[i].addEventListener('click',function(){
    
    
//targetting sibling of every .accordion class named .panel class
    
    let panel = this.nextElementSibling
    
//if panel is open, then this block will close it on mouse click
    
    if(panel.style.maxHeight){
      panel.style.maxHeight=null;
      this.classList.remove('open')
      this.getElementsByClassName('icon')[0].innerHTML ='+';
    }
 //if panel is closed, then this block will open it on mouse click
    else{
      
//Removes everthing on previous accordion on new mouse click       
//by this for loop
      
      for(let x=0;x<acc.length; x++){
        acc[x].classList.remove('open')
        acc[x].nextElementSibling.style.maxHeight=null;
        acc[x].getElementsByClassName('icon')[0].innerHTML ='+';

      }
      
 //if panel is closed, then these codes will open it on mouse click & set those specific rules mentioned below.
      
      panel.style.maxHeight = panel.scrollHeight + 'px';
      this.classList.toggle('open')
      this.getElementsByClassName('icon')[0].innerHTML ='-'
    }
  })
}

```

###**[Once Again, if this post is difficult for you then see Step by step Tutorial on Youtube 🔥](https://www.youtube.com/watch?v=A8_N1l5bIT0&t=70s)**
{% youtube A8_N1l5bIT0 %}


#**Conclusion :** <a name="chapter-5"></a>

####**Congratulations 🎖️**
We're done with the project. 🔥
Let me Know your Thoughts on the Comment Box.

###**Suggestions & Criticisms are Highly Appreciated ❤️️**




   * **Youtube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**