FAQ Accordion

faq-accordion.markdown

FAQ Accordion

A Pen by Harold AO on CodePen.

License.

index.html

<div class="faq__container">
  <h1>Frequently asked question</h1>

  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum</h3>
      <div class="info">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
        molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
        numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
        optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
      </div> 
    </div>
  </section>
  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum</h3>
      <div class="info">
        lorem isupm
      </div> 
    </div>
  </section>
  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum</h3>
      <div class="info">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor nunc ac sapien molestie commodo. Nulla ligula tellus, mattis eu convallis et, egestas venenatis dolor. Vivamus hendrerit neque nec erat convallis, dapibus mollis felis suscipit. Nulla sed lorem maximus, efficitur velit eget, venenatis eros. Duis vestibulum nisi ac orci faucibus, quis placerat erat tempor. Nullam eget sapien dolor. Phasellus tincidunt ipsum metus, vitae faucibus massa pellentesque ut. Curabitur porta egestas magna, sit amet facilisis libero sollicitudin vitae. Maecenas turpis libero, consequat at cursus quis, suscipit in ante.

      </div> 
    </div>
  </section>
  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum</h3>
      <div class="info">
        lorem isupm
      </div> 
    </div>
  </section>
  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum</h3>
      <div class="info">
        lorem isupm
      </div> 
    </div>
  </section>
  <section>
    <div class="status"></div>
    <div class="container">
      <h3>Question lorem ipsum rerum! Provident similique accusantium nemo autem. Veritatis ?</h3>
      <div class="info">
        lorem isupm
      </div> 
    </div>
  </section>
</div>

script.js

const questions = [...document.querySelectorAll("section")];
// console.log(questions);

questions.forEach(question => {
  question.addEventListener("click", () => {
    const opener = question.querySelector(".container");
    opener.addEventListener("click", () => {
      [...questions]
        .filter(q => q !== question)
        .forEach(q => q.classList.remove("opened"));
    })
    // console.log([...questions])
    
    question.classList.toggle('opened');
  })
})

style.scss

$color-1: #e21b31;
$color-2: #fefefe;

html,
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  // height: 100%;
  min-height: 2000px;
}

body{
  background-color: $color-1;
  color: $color-2;
  font-family: Lausanne Regular, Roboto, sans-serif;
}

*,*::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.faq__container{
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  h1{
    // font-size: 9vw;
    font-size: clamp(1rem, 20.5vw, 2.8rem);
    // text-align: center;
    margin-bottom: 20px;
    width: 100%;
    // text-transform: uppercase;
  }
  
  section{
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    border-bottom: 1px solid $color-2;
    padding: 24px 0;
    grid-gap: 0 24px;
    
    h3{
      cursor: pointer;
      font-weight: 700;
      font-size: 2rem;
      line-height: 1.4;
    }
    .info{
      display: none;
      line-height: 1.4;
      font-size: 1.01rem;
      margin: 20px 0;
      max-width: 40em;
      // background: blue;
    }
    
    .status{
      width: 30px;
      height: 30px;
      background: transparent;
      border: 3px solid $color-2;
      border-radius: 100px;
      margin-top: 8px;
      transition: .7s ease-out;
    }
    &.opened {
      .info{
        display: block;
      }
      .status{
        background: $color-2;
      }
    }
  }
}