faq-collapse

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

    <style>

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');


* {

  box-sizing: border-box;

}


body {

  font-family: 'Muli', sans-serif;

  background-color: #f0f0f0;

}


h1 {

  margin: 50px 0 30px;

  text-align: center;

}


.faq-container {

  max-width: 600px;

  margin: 0 auto;

}


.faq {

  background-color: transparent;

  border: 1px solid #9fa4a8;

  border-radius: 10px;

  margin: 20px 0;

  padding: 30px;

  position: relative;

  overflow: hidden;

  transition: 0.3s ease;

}


.faq.active {

  background-color: #fff;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);

}


.faq.active::before,

.faq.active::after {

  content: '\f075';

  font-family: 'Font Awesome 5 Free';

  color: #2ecc71;

  font-size: 7rem;

  position: absolute;

  opacity: 0.2;

  top: 20px;

  left: 20px;

  z-index: 0;

}


.faq.active::before {

  color: #3498db;

  top: -10px;

  left: -30px;

  transform: rotateY(180deg);

}


.faq-title {

  margin: 0 35px 0 0;

}


.faq-text {

  display: none;

  margin: 30px 0 0;

}


.faq.active .faq-text {

  display: block;

}


.faq-toggle {

  background-color: transparent;

  border: 0;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  padding: 0;

  position: absolute;

  top: 30px;

  right: 30px;

  height: 30px;

  width: 30px;

}


.faq-toggle:focus {

  outline: 0;

}


.faq-toggle .fa-times {

  display: none;

}


.faq.active .faq-toggle .fa-times {

  color: #fff;

  display: block;

}


.faq.active .faq-toggle .fa-chevron-down {

  display: none;

}


.faq.active .faq-toggle {

  background-color: #9fa4a8;

}


    </style>

    <title>FAQ</title>

  </head>

  <body>

    <h1>Frequently Asked Questions</h1>

    <div class="faq-container">

      <div class="faq active">

        <h3 class="faq-title">

          Why shouldn't we trust atoms?

        </h3>


        <p class="faq-text">

          They make up everything

        </p>


        <button class="faq-toggle">

          <i class="fas fa-chevron-down"></i>

          <i class="fas fa-times"></i>

        </button>

      </div>


      <div class="faq">

        <h3 class="faq-title">

          What do you call someone with no body and no nose?

        </h3>

        <p class="faq-text">

          Nobody knows.

        </p>

        <button class="faq-toggle">

          <i class="fas fa-chevron-down"></i>

          <i class="fas fa-times"></i>

        </button>

      </div>

     

      <div class="faq">

        <h3 class="faq-title">

          What's the object-oriented way to become wealthy?

        </h3>

        <p class="faq-text">

          Inheritance.

        </p>

        <button class="faq-toggle">

          <i class="fas fa-chevron-down"></i>

          <i class="fas fa-times"></i>

        </button>

      </div>

     

      <div class="faq">

        <h3 class="faq-title">

          How many tickles does it take to tickle an octopus?

        </h3>

        <p class="faq-text">

          Ten-tickles!

        </p>

        <button class="faq-toggle">

          <i class="fas fa-chevron-down"></i>

          <i class="fas fa-times"></i>

        </button>

      </div>

     

      <div class="faq">

        <h3 class="faq-title">

          What is: 1 + 1?

        </h3>

        <p class="faq-text">

          Depends on who are you asking.

        </p>

        <button class="faq-toggle">

          <i class="fas fa-chevron-down"></i>

          <i class="fas fa-times"></i>

        </button>

      </div>

    </div>

    <script>const toggles = document.querySelectorAll('.faq-toggle')


      toggles.forEach(toggle => {

          toggle.addEventListener('click', () => {

              toggle.parentNode.classList.toggle('active')

          })

      })</script>

  </body>

</html>