CSS Accordion Design using jQuery | FAQ Section Design

CSS Accordion Design

In this tutorial, we learn how to create CSS Accordion Design | FAQ Section Design using HTML, CSS, JS?

I hope you will see on multiple website CSS FAQ Design, first thing before creating CSS Accordion Design, we should know about FAQ, some people know but for the beginner in this field.

they need to know, The FAQ contains asked questions by users and their answer shortly. FAQ mean Frequently Asked Questions, are very important for any website.

for example, you can see on google web search engine, when you search on google anything, even google shows search page, FAQ as cards from Multiple sites.

therefore, in this blog we learn to create CSS Accordion design with JS, here, I will design FAQ Section Design with the help of HTML, CSS, JS.

Basically it used for Question and Answer, there are some Question sections and a plus icon on the right side, when you click on the right side plus icons or click on the question, then answer of these question will appear.

furthermore, I have used JavaScript libraries, and have less code which saves you lots of time, this program is very easy, even a beginner can understand in a very easy way.

the main important thing in this program is Plus icon because on click of plus icons function will work, on the click of plus icon it saves space on the webpage, answers are only revealed on click.

I hope you will enjoy this program, and you can use this program after a few changes in the source code.

Explanation of Source code For CSS Accordion Design using jQuery | FAQ Section Design

let’s discuss the about the source code, which I have used for Crete CSS Accordion Design, First I have created div which named container, in this container class I have placed multiple question answer and others sections. therefore, I have taken another div class="Accordions", after that, I have used another div, one div class="Accordions-item" and the second div class="content", these two put inside the div class=”Accordions”.

Here, for placing plus and minus icons, I have used the iconic library (info). All the files like JS, CSS, and icon linked in the HTML file.

you can preview on the click view Demo button, firstly I gave the values of answers with opacity 0 height 0 after that, therefore, create a class named active and put its height 100%, and opacity visible or 1.

I have used more CSS properties to create a design such as a width, height, padding, margin, color, border, font-family, font-size, font-weight, etc.

which I have used Jquery, its handle the toggle features in this program, the main jQuery role here, activating and deactivating, those class, which is active.

therefore, Animation creates with the help of CSS, such as creating the effect animation. these are all the whole concept which I have used to create the CSS Accordion Design.

I hope you will enjoy this program after getting the source code, and also I hope you will learn and used this program on your website. for creating this program I have used three files, one file For HTML, second file for CSS and third file for JavaScript. you can change file according to need.

First step: Create HTML File as name “index.html” | Change filename as you want

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Accordion Design</title>
  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
 
<div class="container">
 
  <h2><u>Frequently Asked Questions | CSS Accordion Design</u></h2>
 
  <div class="Accordions">
    <div class="Accordions-item">
      <a>What is Bootstrap Buttons?</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="Accordions-item">
      <a>Enumerate the differences between Java and JavaScript?</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="Accordions-item">
      <a>Between JavaScript and an ASP script, which is faster?</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="Accordions-item">
      <a>Which company developed JavaScript?</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="js/functions.js"></script>
 
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Accordion Design</title>

</head>

<body>

<h2><u>Frequently Asked Questions | CSS Accordion Design</u></h2>

<a>What is Bootstrap Buttons?</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>Enumerate the differences between Java and JavaScript?</a>

</div>

<a>Between JavaScript and an ASP script, which is faster?</a>

</div>

<a>Which company developed JavaScript?</a>

</div>

</body>

</html>

Second Step: Create CSS file as Filename “stylesheet.css” | Change FileName as you want

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

110

111

112

@import url('https://fonts.googleapis.com/css?family=Hind:300,400');

*, *:before, *:after {

box-sizing: inherit;

-webkit-box-sizing: inherit;

}

html {

box-sizing: border-box;

-webkit-box-sizing: border-box;

}

body {

background: #fff;

color: #4d5974;

margin: 0;

padding: 0;

display: flex;

min-height: 100vh;

font-family: sans-serif;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

}

.container {

background: #fbfbfb;

padding: 4rem;

width: 54rem;

margin: 0 auto;

}

h3 {

padding: 1.3rem;

margin: 0;

font-size: 1.75rem;

color: #373d51;

}

.Accordions a {

position: relative;

display: flex;

flex-direction: column;

width: 100%;

padding: 1rem 3rem 1rem 1rem;

color: #7288a2;

font-size: 1.15rem;

font-weight: 400;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

-ms-flex-direction: column;

border-bottom: 2px solid #e5e5e5;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

}

.Accordions a:hover,

.Accordions a:hover::after {

color: #ff1d05;

cursor: pointer;

}

.Accordions a:hover::after {

border: 1px solid #ff1d05;

}

.Accordions a.active {

border-bottom: 2px solid #f99a0d;

color: #f99a0d;

}

.Accordions a::after {

width: 30px;

height: 30px;

right: 1rem;

font-size: 1rem;

text-align: center;

color: #7288a2;

font-family: 'Ionicons';

content: '\f218';

position: absolute;

float: right;

padding: 5px;

border-radius: 50%;

border: 1px solid #7288a2;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

}

.Accordions a.active::after {

font-family: 'Ionicons';

border: 1px solid #f99a0d;

content: '\f209';

color: #f99a0d;

}

.Accordions .content {

overflow: hidden;

clear: both;

border-bottom: 1px solid #e5e5e5;

opacity: 0;

padding: 0 1rem;

max-height: 0;

-webkit-transition: all 0.2s ease 0.15s;

-o-transition: all 0.2s ease 0.15s;

transition: all 0.2s ease 0.15s;

}

.Accordions .content p {

line-height: 29px;

font-weight: 300;

font-size: 1rem;

}

.Accordions .content.active {

max-height: 100%;

opacity: 1;

padding: 1rem;

-webkit-transition: all 0.35s ease 0.15s;

-o-transition: all 0.35s ease 0.15s;

transition: all 0.35s ease 0.15s;

}

Third Step: Create JS File as name “functions.js” | Change filename as you want

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

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

function toggleAccordions(){

this.classList.toggle('active');

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

}

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

Therefore, see the code segment to create the CSS Accordion Design using jQuery, you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.

CSS Accordion Design using jQuery | FAQ Section Design

Explanation of Source code For CSS Accordion Design using jQuery | FAQ Section Design

First step: Create HTML File as name “index.html” | Change filename as you want

Second Step: Create CSS file as Filename “stylesheet.css” | Change FileName as you want

Third Step: Create JS File as name “functions.js” | Change filename as you want

Related Posts

About Author

admin