<html lang="en">
 
<body>
  
  <section id="faq">
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-title">
          <h2>What color is the sky?</h2>
          <i class="material-icons add">add_circle_outline</i>
          <i class="material-icons remove">remove_circle_outline</i>
        </div>
         <div class="accordion-content">
            <p>The sky is a light shade of blue during th day, but a dark black during the night.</p>
         </div>
       </div>
       <div class="accordion-item">
        <div class="accordion-title">
          <h2>How much do you eat?</h2>
          <i class="material-icons add">add_circle_outline</i>
          <i class="material-icons remove">remove_circle_outline</i>
        </div>
        <div class="accordion-content">
          <p>Not a lot, but not too little either.</p>
        </div>
       </div>
       <div class="accordion-item">
         <div class="accordion-title">
            <h2>Who are you?</h2>
            <i class="material-icons add">add_circle_outline</i>
            <i class="material-icons remove">remove_circle_outline</i>
          </div>
          <div class="accordion-content">
             <p>I'm the creator of this pen: Nessie</p>
          </div>
        </div>
    </div>

    <script src="script.js"></script>
    </section>

  </body>
</html>
/*FAQ section, where the accordion is kept, including section specific css*/
#faq{
  display: flex;
  
  align-items: center;
	justify-content: center;
  
	width: 100%;
	min-height: 100vh;
}

#faq .add{ /*Add is the name for the plus icon*/
	display: block;
}

#faq .remove{ /*Remove is the name for the less icon*/
	display: none;
}

#faq i{ 
	font-size: 30px;
}

/*Accordion container and each item*/
.accordion{
	max-width: 800px;
  
	margin: 0 auto;
	padding: 0 1.5rem;
}	

.accordion-item{
	background-color: transparent;
  border-bottom: 3px solid #ff6666;
  
	margin-bottom: 10px;
	padding: 10px;
}

/*Styles for the question*/

.accordion-title{
  display: flex;
  
  align-items: center;
	justify-content: space-around;
  
	color: black;
	font-size: 18px;
  font-family: Open Sans;
  font-weight: 600;
  
	width: 100%;
	padding: 1rem 0;
	cursor: pointer;
  transition-duration: 0.5s;
}

.accordion-title:hover{
  color: #ff6666;
}

.accordion-title h2{
	width: 80%;
}

/*Styles for the answer*/

.accordion-content{
  max-height: 0;
  overflow: hidden;
	position: relative;
	background-color: #ff6666;
  transition: max-height 0.6s;
  font-family: Open Sans;
  font-weight: 400;
}

.accordion-content p{
  padding: 20px;
	color: white;
}
const questions = document.getElementsByClassName('accordion-title')//Gets all the questions (plus icon)

for (const question of questions) {
  const answer = question.parentElement.querySelector('.accordion-content')
  const remove = question.parentElement.querySelector(".remove")
  const add = question.parentElement.querySelector(".add")
  let open = false //Variable to check if the answer is visible or not

  function openAnswer() {
    if (open == true) { //If you click the question while the answer is visible it will stop being visible and open will change it's value to false
      add.style.display = "block";
      remove.style.display = "none";
      answer.style.overflow = "hidden";
      answer.style.maxHeight = '0';
      open = false; 
    } else { //If you click the question while the answer is not visible it will start being visible and open will change it's value to true
      add.style.display = "none";
      remove.style.display = "block";
      answer.style.maxHeight = "300px";
      answer.style.overflow = "visible";
      open = true;
    }
  }

  question.addEventListener('click', openAnswer) 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.