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

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

</div>

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

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

</div>

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

@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';
  }
}

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

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

// Targetting & styling all .panel classes

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

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

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