Frequently Asked Questions using HTML & CSS & JS

Frequently Asked Questions
Frequently Asked Questions
FAQ means Frequently Asked Questions. An FAQ is a list of commonly asked questions and answers on a website/blog about such as works, profits, hours, shipping and handling, product information, and many more. By FAQs user can easily solve out their most of the doubts related to that website. In this blog post learn about Frequently Asked Questions using HTML & CSS & JS.
◘ FAQs are generally asked questions by the users and answers by the experts on a particular platform. It play major role in clearing most of the doubtful questionnaires. Users can easily find their solutions while reading FAQs.
Here’s the Code of FAQs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: transparent;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #6dd5ed;
}

.accordion:after {
  content: '02B';
  color: red;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "2212";
}

.panel {
  padding: 0 18px;
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>FAQs</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr/>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr/>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr/>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

◘  If you want to implement this code onto your blog. Simply copy it, edit it and add to that page where you want to add it.

◘ Creating coding structure

CSS for FAQS

.accordion {

  background-color: transparent;

  color: #444;         ~ Text color

  cursor: pointer;

  padding: 18px;

  width: 100%;         ~ Width of FAQs

  border: none;

  text-align: left;        ~ Alignment for the text to be written 

  outline: none;

  font-size: 15px;         ~ Font-size

  transition: 0.4s;

}

 

• All codes were modified as per needs,

• For users, who don’t know much about coding they can simply use the code as it is or can contact us for editing code as they want.

Thanks for being here, stay connect with us.

Leave a Comment