Home Web Design CSS CSS Responsive FAQ Section with jQuery | Responsive Toggle FAQ

CSS Responsive FAQ Section with jQuery | Responsive Toggle FAQ

January 21, 2020

2762

How we can create a responsive FAQ section using HTML CSS JS? Solution: Check out this CSS Responsive FAQ Section with jQuery, Responsive Toggle FAQ.

Previously I have shared an accordion-based FAQ, but this is a responsive FAQ section design with CSS styles and jQuery toggle. Basically, FAQ stands for Frequently Asked Questions and it is for answering common questions asked by users. And this section is one of the very helpful parts of a website. Also, google appreciate this section and developed the FAQ schema feature to show the question/answer on the search result page.

Today you will learn to create Responsive Toggle FAQ design. Basically, there are some questions that are divided into 3 parts. When you will click on any question and its answer will appear on the right side and when you click on another question then that answer will visible. Because of responsive design, the answers will place at the bottom of each question on small screen sizes like mobile. And the whole program has 2 color combinations with good UI design.

So, Today I am sharing the CSS Responsive FAQ Section with jQuery. There I have used HTML and CSS to create the whole program, but the switch answer toggle feature is based on jQuery. There is not any library like bootstrap to creating a responsive design. This a complete program with easy codes, you can use this on your website.

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

Preview Of Responsive Toggle FAQ Design

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

Live Demo

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

CSS Responsive FAQ Section with jQuery Source Code

Before sharing source code, let’s talk about it. First I have created a main div named container and put all items inside it. There I have used the HTML list to creating 3 sections basically, I have created 3 lists. And there is an H1 and three H2 tags, the first heading is for show FAQ text and the other three are related to 3 sections. Inside every list item, I have placed a question and answer.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS, first I gave values to the elements like size, position, margin, padding, color, etc. There I have used a google font to styling the texts. For creating a responsive design, I used CSS @media query and reduced sizes and change placements of elements.

jQuery handling here only the open and close answer feature. Basically, jQuery only adding and removing class names according to actions. 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. First file for HTML, second file for CSS, and the third file for JavaScript.

Follow the steps to creating this program without any trouble.

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>Responsive FAQ | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=ABeeZee|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <h1 class="section__headline">FAQs</h1>
  <h2 class="FAQs__headline">Basic Things</h2>
  <ul class="FAQs">
    <li class="FAQ FAQ--active">
      <span class="FAQ__title">Is HTML a programming language?</span>
      <div class="FAQ__answer">No, HTML is not a programming language. The "M" stands for "Markup". Generally, a programming language allows you to describe some sort of process of doing something, whereas HTML is a way of adding context and structure to text.</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">What is Canvas in HTML?</span>
      <div class="FAQ__answer">The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">IS inline CSS is bad?</span>
      <div class="FAQ__answer">It depends, But A separate stylesheet is usually the better choice.</div>
    </li>
  </ul>  
  
    <h2 class="FAQs__headline">JS Related Questions</h2>
  <ul class="FAQs">
    <li class="FAQ">
      <span class="FAQ__title">What is jQuery?</span>
      <div class="FAQ__answer">jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.[2] It is free, open-source software using the permissive MIT License..</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">JavaScript can be used to validate forms?</span>
      <div class="FAQ__answer">JavaScript provides a way to validate form's data on the client's computer before sending it to the web server.</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">Is JS hard to learn?</span>
      <div class="FAQ__answer">JavaScript is so hard to learn because it seemingly violates a ton of the rules you've previously learned while working with a different programming language.</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">What is React JS?</span>
      <div class="FAQ__answer">React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.</div>
    </li>
    <li class="FAQ FAQ">
      <span class="FAQ__title"> IS angular is similar to JS?</span>
      <div class="FAQ__answer">No, JavaScript is a programming language whereas AngularJS is an open source framework and based on MVC architecture. JavaScript is mainly written for websites to run in the client's browser.</div>
    </li>
  </ul>  
  
    <h2 class="FAQs__headline">Other questions</h2>
  <ul class="FAQs">
    <li class="FAQ">
      <span class="FAQ__title">What is Search Engine Optimization?</span>
      <div class="FAQ__answer">Search engine optimization is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. SEO refers to the improvement of unpaid results and excludes direct traffic/visitors and the purchase of paid placement.</div>

    </li>
    <li class="FAQ">
      <span class="FAQ__title">Can paid ads imporve SERP?</span>
      <div class="FAQ__answer">PPC ads like Google Ads are paid online advertisements which appear next to relevant searches and other content on the web. Running a Google Ads campaign does not help your SEO rankings, despite some myths and claims.</div>
    </li>
    <li class="FAQ">
      <span class="FAQ__title">What is organic SEO?</span>
      <div class="FAQ__answer">Organic traffic. The term “organic traffic” is used for referring to the visitors that land on your website as a result of unpaid (“organic”) search results. ... The branch of online marketing that focuses directly on improving organic traffic is called SEO - search engine optimization.</div>
    </li>
  </ul>
  
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Responsive FAQ | Webdevtrick.com</title>

</head>

<body>

<h2 class="FAQs__headline">Basic Things</h2>

<span class="FAQ__title">Is HTML a programming language?</span>

<div class="FAQ__answer">No, HTML is not a programming language. The "M" stands for "Markup". Generally, a programming language allows you to describe some sort of process of doing something, whereas HTML is a way of adding context and structure to text.</div>

</li>

<span class="FAQ__title">What is Canvas in HTML?</span>

<div class="FAQ__answer">The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.</div>

</li>

<span class="FAQ__title">IS inline CSS is bad?</span>

<div class="FAQ__answer">It depends, But A separate stylesheet is usually the better choice.</div>

</li>

</ul>

<h2 class="FAQs__headline">JS Related Questions</h2>

<span class="FAQ__title">What is jQuery?</span>

<div class="FAQ__answer">jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.[2] It is free, open-source software using the permissive MIT License..</div>

</li>

<span class="FAQ__title">JavaScript can be used to validate forms?</span>

<div class="FAQ__answer">JavaScript provides a way to validate form's data on the client's computer before sending it to the web server.</div>

</li>

<span class="FAQ__title">Is JS hard to learn?</span>

<div class="FAQ__answer">JavaScript is so hard to learn because it seemingly violates a ton of the rules you've previously learned while working with a different programming language.</div>

</li>

<span class="FAQ__title">What is React JS?</span>

<div class="FAQ__answer">React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.</div>

</li>

<span class="FAQ__title"> IS angular is similar to JS?</span>

<div class="FAQ__answer">No, JavaScript is a programming language whereas AngularJS is an open source framework and based on MVC architecture. JavaScript is mainly written for websites to run in the client's browser.</div>

</li>

</ul>

<h2 class="FAQs__headline">Other questions</h2>

<span class="FAQ__title">What is Search Engine Optimization?</span>

<div class="FAQ__answer">Search engine optimization is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. SEO refers to the improvement of unpaid results and excludes direct traffic/visitors and the purchase of paid placement.</div>

</li>

<span class="FAQ__title">Can paid ads imporve SERP?</span>

<div class="FAQ__answer">PPC ads like Google Ads are paid online advertisements which appear next to relevant searches and other content on the web. Running a Google Ads campaign does not help your SEO rankings, despite some myths and claims.</div>

</li>

<span class="FAQ__title">What is organic SEO?</span>

<div class="FAQ__answer">Organic traffic. The term “organic traffic” is used for referring to the visitors that land on your website as a result of unpaid (“organic”) search results. ... The branch of online marketing that focuses directly on improving organic traffic is called SEO - search engine optimization.</div>

</li>

</ul>

</div>

</body>

</html>

style.css

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */
.FAQ__answer {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

body {
  box-sizing: border-box;
  font-family: "ABeeZee", sans-serif;
  line-height: 1.48;
  font-size: 16px;
  color: #333;
}

body *,
body *::after,
body *::before {
  box-sizing: inherit;
}

.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.section__headline {
  font-family: "Varela Round", sans-serif;
  font-size: 62px;
  font-weight: light;
  color: #ff5555;
  padding-left: 15px;
  padding-top: 30px;
}

.FAQs__headline {
  font-family: "Varela Round", sans-serif;
  text-align: left;
  padding-left: 15px;
  font-size: 1.5em;
  margin-top: 1.5em;
  font-weight: bold;
}

.FAQs {
  margin: 15px 0;
  padding: 0 15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.FAQ {
  font-family: "Varela Round", sans-serif;
  list-style: none;
  margin: 10px 0 5px;
}

.FAQ__title {
  cursor: pointer;
  font-weight: 500;
  background: white;
  z-index: 10;
  position: relative;
  font-size: 1.1em;
}
.FAQ__title:hover {
  text-decoration: underline;
}
.FAQ__title::after {
  white-space: nowrap;
  font-weight: 300;
  padding-left: 5px;
  opacity: 0;
  -webkit-transform-origin: 11px;
          transform-origin: 11px;
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
  display: none;
  content: ">";
}

.FAQ--active .FAQ__title {
  color: #ff5555;
}
.FAQ--active .FAQ__title::after {
  opacity: 1;
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
  display: inline-block;
}

.FAQ__answer {
  font-weight: normal;
  margin-top: -10%;
  transition: all 0.1s;
  z-index: 1;
  font-size: 0.9em;
  color: #505050;
}

.FAQ--active .FAQ__answer {
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  font-weight: 300;
  margin-top: 5px;
  margin-bottom: 10px;
  transition: all 0.2s;
  border-radius: 3px;
  border: 1px solid #f1f2f3;
  border-top: 1px solid #ff5555;
  padding: 20px;
}

@media (min-width: 780px) {
  .FAQs {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: auto;
  }

  .FAQs::before {
    opacity: 0.2;
  }

  .FAQ {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .FAQ .FAQ__title {
    width: 50%;
    padding-right: 40px;
    display: inline-block;
  }
  .FAQ .FAQ__title::after {
    display: none;
  }
  .FAQ .FAQ__answer {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 50%;
    width: 50%;
    border-left-color: #ff5555;
    border-top-color: #f1f2f3;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

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

.FAQ__answer {

position: absolute;

opacity: 0;

z-index: -1;

}

body {

box-sizing: border-box;

font-family: "ABeeZee", sans-serif;

line-height: 1.48;

font-size: 16px;

color: #333;

}

body *,

body *::after,

body *::before {

box-sizing: inherit;

}

.container {

max-width: 1100px;

margin-left: auto;

margin-right: auto;

}

.section__headline {

font-family: "Varela Round", sans-serif;

font-size: 62px;

font-weight: light;

color: #ff5555;

padding-left: 15px;

padding-top: 30px;

}

.FAQs__headline {

font-family: "Varela Round", sans-serif;

text-align: left;

padding-left: 15px;

font-size: 1.5em;

margin-top: 1.5em;

font-weight: bold;

}

.FAQs {

margin: 15px 0;

padding: 0 15px;

border-top: 1px solid transparent;

border-bottom: 1px solid transparent;

}

.FAQ {

font-family: "Varela Round", sans-serif;

list-style: none;

margin: 10px 0 5px;

}

.FAQ__title {

cursor: pointer;

font-weight: 500;

background: white;

z-index: 10;

position: relative;

font-size: 1.1em;

}

.FAQ__title:hover {

text-decoration: underline;

}

.FAQ__title::after {

white-space: nowrap;

font-weight: 300;

padding-left: 5px;

opacity: 0;

-webkit-transform-origin: 11px;

transform-origin: 11px;

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

display: none;

content: ">";

}

.FAQ--active .FAQ__title {

color: #ff5555;

}

.FAQ--active .FAQ__title::after {

opacity: 1;

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

display: inline-block;

}

.FAQ__answer {

font-weight: normal;

margin-top: -10%;

transition: all 0.1s;

z-index: 1;

font-size: 0.9em;

color: #505050;

}

.FAQ--active .FAQ__answer {

opacity: 1;

position: relative;

top: 0;

left: 0;

font-weight: 300;

margin-top: 5px;

margin-bottom: 10px;

transition: all 0.2s;

border-radius: 3px;

border: 1px solid #f1f2f3;

border-top: 1px solid #ff5555;

padding: 20px;

}

@media (min-width: 780px) {

.FAQs {

position: relative;

margin-left: auto;

margin-right: auto;

height: auto;

}

.FAQs::before {

opacity: 0.2;

}

.FAQ {

margin-top: 15px;

margin-bottom: 15px;

}

.FAQ .FAQ__title {

width: 50%;

padding-right: 40px;

display: inline-block;

}

.FAQ .FAQ__title::after {

display: none;

}

.FAQ .FAQ__answer {

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

left: 50%;

width: 50%;

border-left-color: #ff5555;

border-top-color: #f1f2f3;

}

function.js

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

// Code By Webdevtrick ( https://webdevtrick.com )
$('body').delegate('.FAQ', 'click', function(){
  $('.FAQ').removeClass('FAQ--active');
  $(this).addClass('FAQ--active');
});

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

$('body').delegate('.FAQ', 'click', function(){

$('.FAQ').removeClass('FAQ--active');

$(this).addClass('FAQ--active');

});

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

Thanks For Visiting, Keep Visiting.

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Responsive Toggle FAQ Design

CSS Responsive FAQ Section with jQuery Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY