FAQ Section using HTML ,CSS & JavaScript

Create a FAQ Section using HTML ,CSS & JavaScript

Create a FAQ Section using HTML ,CSS & JavaScript

You see when we type or search something on our search engine earlier it used to give the result and a link that has all the content related to it so that the user doesn’t need to scroll or surf more time to find the one problem solution.

Nowadays as technology and AI updates there’s a feature has came known as FAQ this basically gives all the answers what questions will be in the head of the user if he wants to download a game, FAQ will be generated with pros and cons as well as the alternative sites or tips, etc. FAQ feature is basically introduced to solve the 75% – 80% problem of the user.

Now as a developer there’s nothing we can’t recreate or code so let’s see the building of this feature. In This Article We Create FAQ Section using HTML ,CSS & JavaScript.On that note, I welcome you all to Codewithrandom with a new blog in which we’ll see the creation FAQ feature.

I hope you have got an idea for this project.

HTML Code for FAQ Section

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML CSS FAQ Design | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">

    <h2>Frequently Asked Questions</h2>

    <div class="accordion">
      <div class="accordion-item">
        <a>What can JavaScript Do?</a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
      <div class="accordion-item">
        <a>How JavaScript Can Modify HTML and CSS Values?</a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
      <div class="accordion-item">
        <a>What Is SVG?</a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
      <div class="accordion-item">
        <a>Is FAQ Section Matters In Website?</a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
      <div class="accordion-item">
        <a>How To Create a Light FAQ Element?</a>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
    </div>

  </div>

  <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
  <script src="function.js"></script>
</body>
</html>

In this HTML Code we have defined the structure in which under the accordion item tag we have defined some question and their answers and then we have linked a jQuery code and in the script tag because it will be going to use when we will code the JavaScript now lets code the CSS part to add styling to the FAQ Design.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code for FAQ Section

@import url('https://fonts.googleapis.com/css?family=Hind:300,400');
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Hind', sans-serif;
  background: #fff;
  color: #4d5974;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
}
.container {
  margin: 0 auto;
  padding: 4rem;
  width: 48rem;
}
h3 {
  font-size: 1.75rem;
  color: #373d51;
  padding: 1.3rem;
  margin: 0;
}
.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}
.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #ff5353;
}
.accordion a:hover::after {
  border: 1px solid #ff5353;
}
.accordion a.active {
  color: #ff5353;
  border-bottom: 1px solid #ff5353;
}
.accordion a::after {
  font-family: 'Ionicons';
  content: '\f218';
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #7288a2;
  text-align: center;
}
.accordion a.active::after {
  font-family: 'Ionicons';
  content: '\f209';
  color: #ff5353;
  border: 1px solid #ff5353;
}
.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}
.accordion .content p {
  font-size: 1rem;
  font-weight: 300;
}
.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}

In this code of CSS we have styled the FAQ design in which we have styled the accordion tag to make it look like a FAQ design which is loaded after the user searches in the google we have defined the transition, opacity, padding, margin, font-family, font-weight etc. So that every thing is aligned properly and it doesn’t get messy while we run it. Now lets code the JavaScript part to make it responsive.

50+ Html ,Css & Javascript Projects With Source Code

JavaScript Code for FAQ Section

const items = document.querySelectorAll(".accordion a");
function toggleAccordion(){
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}
items.forEach(item => item.addEventListener('click', toggleAccordion));

In this JS code we have first used the syntax called document.querySelector in it will toggle the Question and embed the answer in it. And as soon as the user will click on the dropdown it will appear. To make the click responsive we have added a syntax addEventListener which will make it responsive as soon as the user will click it. Let us see the final output of the FAQ Design.

Final Output Of FAQ Section using HTML ,CSS & JavaScript

We have Successfully created our FAQ Section using HTML ,CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

Portfolio Website Using HTML ,CSS and Javascript Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – @harshh9



Tags: , ,

Leave a Reply