Skip to main content

FAQ Accordion Design | Rustcode

by Rustcode
FAQ-Accordion-Design-HTML-CSS-And-JavaScript

"faq accordion design" is a very popular part of every website because we resolve the general query of users through this section. faq means "frequently ask questions". Nowadays this concept is going to more popular because it makes the website more interactive and helps to solve frequently asked questions by visitors. so let's get started. You can check out our other articles which are related to web development.



1. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Accordion Design | Rustcode</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>

  Main content.

</body>
</html>


2. INCLUDE FONT-AWESOME

<!DOCTYPE html>
<html>
  <head>
    <title>Faq Accordion Design | Rustcode</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    Main Content.
    
    <script src="script.js" ></script>
  </body>
</html>



3. HTML

  <body>
    <div class="faq-accordion-container">
      <ul style="list-style: none;padding: 0px;">
        <h3>FAQs</h3>
        <li class="default-faq-open">
          <div class="faq-question">
            <h2>What are your opening hours?</h2>
            <span class="fa fa-caret-down"></span>
          </div>
          <div class="faq-answer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus maximus lectus, eget fermentum lacus congue vel. Nam sem lectus, interdum ut maximus sed.</p>
          </div>
        </li>
        <li>
          <div class="faq-question">
            <h2>What is your cancellation policy?</h2>
            <span class="fa fa-caret-down"></span>
          </div>
          <div class="faq-answer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus maximus lectus, eget fermentum lacus congue vel. Nam sem lectus, interdum ut maximus sed.</p>
          </div>
        </li>
        <li>
          <div class="faq-question">
            <h2>is your service safe to use?</h2>
            <span class="fa fa-caret-down"></span>
          </div>
          <div class="faq-answer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus maximus lectus, eget fermentum lacus congue vel. Nam sem lectus, interdum ut maximus sed.</p>
          </div>
        </li>
      </ul>
    </div>
    <script src="script.js" ></script>
  </body>


4. CSS

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F7F7F7;
}

.faq-accordion-container {
  padding: 30px 10px;
  background: #fff;
  font-family: "Poppins";
  color: black;
  max-width: 500px;
}

.faq-question {
  border-top: 1px solid #EEE;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.faq-accordion-container h3 {
  background: #7010EF;
  color: white;
  padding: 10px;
}

.faq-question h2 {
  font-size: 14px;
  margin: 0;
  font-weight: 700;
  letter-spacing: .05rem;
}

.faq-question>.fa {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #7010EF;
  transition: 0.6s all;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

.faq-answer>p {
  padding: 10px;
}

.faq-accordion-container li.default-faq-open .faq-question .fa {
  transform: rotate(180deg);
}

.faq-accordion-container li.default-faq-open .faq-answer {
  max-height: 500px;
}



5. SCRIPT

const accordion = document.querySelector('.faq-accordion-container');
const items     = accordion.querySelectorAll('li');
const questions = accordion.querySelectorAll('.faq-question');

function toggleFaqAccordion() {
  const thisItem = this.parentNode;

  items.forEach(item => {
    if (thisItem == item) {
      thisItem.classList.toggle('default-faq-open');
      return;
    }

    item.classList.remove('default-faq-open');
  });
}

questions.forEach(question => question.addEventListener('click', toggleFaqAccordion));


6. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.



7. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.




Comments

Post a Comment