Home Web Development HTML CSS FAQ Design With jQuery Accordion | FAQ Section Design

HTML CSS FAQ Design With jQuery Accordion | FAQ Section Design

September 20, 2019

31318

How we can create a FAQ section using HTML CSS JS? Solution: See this HTML CSS FAQ Design With jQuery Accordion, FAQ Section Design using HTML, CSS, and JavaScript.

FAQ or Frequently Asked Questions are very important for any website. The FAQ contains commonly asked questions by users and their answer shortly. Nowadays FAQ is very important, even google shows FAQ as cards form multiple sites on their search page. After placing this section, your users don’t have to contact you for aksing mostly asked question.

Today you will learn to create FAQ section design with an accordion. Previously I have shared accordion design using JS, this is also similar to that but this one is specially created for question answers. Basically, there are some question sections and a plus icon on the right side when you will click on any question or icon then answers will appear.

So, Today I am sharing HTML CSS FAQ Design With jQuery Accordion. Here I have used jQuery for less code and easy work, as you know libraries save our time that’s why I am using this. This program is very simple, even a beginner can understand easily. The main plus point is for that kind of design it saves space on the webpage, answers are only reveals on click.

If you are thinking now how this FAQ page actually is, then see the preview given below.

Preview Of Frequently Asked Questions Section Design

See this video preview to getting an idea of how this section looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given below. If you like this, then get the source code of its.

HTML CSS FAQ Design With jQuery Accordion Source Code

Before sharing source code, let’s talk about it. First, I have created a main div named container and placed multiple question-answer. Each question-answer section has placed in two divs, one div contains question and another answer. Here I have used the iconic library (get) to placing plus and minus icons. All the files like CSS, JS, and icon linked in the HTML file.

Now using CSS I have placed all the elements on the right place, as you can see in the preview. Firstly I gave the values of answers with height 0 and opacity 0, after that create a class named active and put its opacity 1 or visible and height 100%. And many more things are done using CSS like margin, padding, width, height, etc.

jQuery handling the toggle feature in this program. Basically, jQuery activating and deactivating the active class, and in the CSS file, there is an animation dealy for creating the effect. That is the whole concept left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program, you have to create 3 files for that. First for HTML file, second for CSS, and the last for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<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>

<!DOCTYPE html>

<head>

<title>HTML CSS FAQ Design | Webdevtrick.com</title>

</head>

<body>

<h2>Frequently Asked Questions</h2>

<a>What can JavaScript Do?</a>

<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>

<a>How JavaScript Can Modify HTML and CSS Values?</a>

</div>

</div>

<a>Is FAQ Section Matters In Website?</a>

</div>

<a>How To Create a Light FAQ Element?</a>

</div>

</body>

</html>

style.css

Now create a CSS file for styling named ‘style.css‘ and these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@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;
}

100

101

102

103

104

105

106

107

108

109

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@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;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
const items = document.querySelectorAll(".accordion a");

function toggleAccordion(){
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

// Code By Webdevtrick ( https://webdevtrick.com )

const items = document.querySelectorAll(".accordion a");

function toggleAccordion(){

this.classList.toggle('active');

this.nextElementSibling.classList.toggle('active');

}

items.forEach(item => item.addEventListener('click', toggleAccordion));

That’s It. Now you have successfully created HTML CSS FAQ Design With jQuery Accordion, FAQ Section Design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

webster October 23, 2019 At 4:23 am

Node.js accordion FAQ with Searchbar
Here’s : https://github.com/gnokoheat/nodejs-accordion-faq-with-searchbar

Reply
Dackard March 9, 2020 At 9:11 pm

Thanks for the great code.
I am trying to auto collapse all open answers after clicking one answer (leave only this particular answer open and collapse all others) but no luck!
Can you give the necessary code for this?

Reply
hall decoration items July 10, 2020 At 12:41 am

I have recently started a website, thhe info you
provide on this website has herlped me greatly. Thnks for all of your
time & work.

Reply
Saul July 13, 2020 At 4:16 am

hi!,I like your writing so so much! proportion we communicate
more approximately your article on AOL? I require an expert on this space to
resolve my problem. Maay be that is you! Takinng a look ahead
to see you.

Reply
immigration lawyer Guildford September 4, 2020 At 11:02 am

Hello. excellent job. I did not imagine this. Thiis is a impressive story.
Thanks!

Reply
Steve October 21, 2020 At 12:10 am

this is great but I want to count the number of items in each accordion

Reply
SSoft February 3, 2022 At 6:43 am

Thanks for the great code.
I am trying to auto collapse one when we open another..

Can you give the necessary code for this?

Reply