<div class="faq">
      <h1>Frequently asked questions</h1>
      <div class="questions">
        <p class="question"></p>
        <div><p class="answer"></p></div>
      </div>
      <div class="questions">
        <p class="question"></p>
        <div><p class="answer"></p></div>
      </div>
      <div class="questions">
        <p class="question"></p>
        <div><p class="answer"></p></div>
      </div>
    </div>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7499f6;
  font-family: "Ubuntu", sans-serif;
  margin: 0;
}
h1 {
  font-size: 1.7em;
  text-align: center;
  color: #f47c58;
}
.question {
  font-size: 1em;
  margin: 1em;
}
.answer {
  font-size: 0.92em;
  margin: 1.2em 2em;
}
.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  padding: 2em;
  border-radius: 5px;
  background: #e6e6e5;
}
.questions {
  width: 95%;
  margin: 0.7em 0;
  border-radius: 5px;
  background: #fefefd;
  cursor: pointer;
  height: 3.5em;
  transition: height 1s linear;
}
.questions div {
  position: relative;
  top: -35px;
  opacity: 0;
  transition: all 1s linear;
}
.questions.revealed {
  height: 6em;
}
.questions .revealed {
  opacity: 1;
  top: 0;
}
.question::before {
  content: url(https://img.icons8.com/external-outline-astudio/20/f47c58/external-arrow-arrow-outline-astudio-28.png);
  margin: 0 0.8em;
  display: inline-block;
}
.question.rotate::before {
  transform: rotate(-90deg);
}

@media (max-width: 700px) {
  .faq {
    width: 80%;
  }
  .questions.revealed {
    height: 8em;
  }
}

const faq = [
  {
    question: "How many bones does a cat have?",
    answer: "A cat has 230 bones - 6 more than a human",
    open: true,
  },
  {
    question: "How much do cats sleep?",
    answer: "The average cat sleeps 12-16 hours per day",
    open: false,
  },
  {
    question: "How long do cats live",
    answer:
      "Outdoor cats live 5 years on average. Indoor\ncats live 15 years on average.",
    open: false,
  },
];

const questions = document.getElementsByClassName("questions");

Object.values(questions).map((question, i) => {
  question.id = i;
  question.addEventListener("click", onClickQuestion);
  question.firstElementChild.innerText = faq[i].question;

  if (faq[i].open) {
    question.classList.add("revealed");
    question.firstElementChild.classList.add("rotate");
    question.lastElementChild.classList.add("revealed");
    question.lastElementChild.children[0].innerText = faq[i].answer;
  }
});

function onClickQuestion(event) {
  const curr = event.currentTarget;

  if (faq[curr.id].open) {
    faq[curr.id].open = false;

    curr.classList.remove("revealed");
    curr.firstElementChild.classList.remove("rotate");
    curr.lastElementChild.classList.remove("revealed");
    curr.lastElementChild.children[0].innerText = "";
  } else {
    faq[curr.id].open = true;

    curr.classList.add("revealed");
    curr.firstElementChild.classList.add("rotate");
    curr.lastElementChild.classList.add("revealed");
    curr.lastElementChild.children[0].innerText = faq[curr.id].answer;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.