Content Organization with Animated FAQ Accordion in 2021 !🔥|| CSS JS

#codepen #css #webdev #productivity

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

Youtube Tutorial 🔥

If this post is difficult for you then see Step by step Tutorial on Youtube 🔥

HTML :

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

<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

<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.

<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.

<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 :

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.


@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 :

First, style the .container

.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

// 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

// 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

// 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 :

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


// 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 ='-'
    }
  })
}