Simple FAQ Accordion With HTML CSS and JavaScript

In this tutorial we will see how to make a Simple FAQ Accordion With HTML, CSS and JavaScript. Pure CSS and Vanilla JavaScript is used to make this FAQ page, CSS code and JavaScript code is given along with the explanation.

Table of Contents

HTML Code

Take a look at the HTML code given below


<div class="faq">

<div>
 <p class="question">What does HTML mean? <span onclick='faq(this)' class="opener">+</span></p>
 <p class="answer">HTML stands for HyperText Markup Language.</p>
</div>

<div>    
 <p class="question">What does CSS mean? <span onclick='faq(this)' class="opener">+</span></p>
 <p class="answer">CSS stands for Cascading Style Sheets.</p>
</div>

<div>    
 <p class="question">What is JavaScript? <span onclick='faq(this)' class="opener">+</span></p>
 <p class="answer">JavaScript is a client side programming language.</p>  
</div>

</div>

HTML Div elements and paragraph elements are used to make the basic structure of the FAQ section.

Span tag is used inside the p tag of each question to define the element, which will be used to open and close each individual answer of each question.

HTML onclick attribute is used inside each span tag.

HTML onclick attribute

HTML onclick attribute fires on a mouse click. In this case it will trigger a JavaScript function which will show and hide the answers.

CSS Code

CSS code is given below, In this code CSS class selectors like .faq, .question, .answer and .opener are used to style each HTML element.

Main CSS property used in this code is max-height. max-height of each answer is changed to create an open and close effect.


<style>      
body {
font-family:monospace;
background-color:#f2d241;
}
.faq {
width:70%;
margin: 0 auto;
}
.faq div {
border: 1px solid #000;
margin: 5px 0px;
background-color:#fff;
}
.question {
font-size:18px;
background-color:#ddd;
margin:0px;
padding: 15px;
}
.answer {
font-size:12px;
margin:0px;
padding: 0px 15px;
line-height:2;
max-height:0px;
overflow:hidden;
transition:2s;
}
.opener
{
font-size:25px;
float:right;
line-height:0.8;
cursor: pointer;
}
</style>

JavaScript Code

Take a look at the Pure JavaScript Code given below, each important part of this code is further explained below.


<script>
function faq(ele)
{
var x = ele.parentElement.nextElementSibling.style.cssText;
if(x=='max-height: 500px;')
{    
ele.style.cssText='transform: rotate(0deg);';     
ele.parentElement.nextElementSibling.style.cssText = "transition:0.3s;max-height:0px;";    
}
else
{
ele.style.cssText='transform: rotate(45deg);';   
ele.parentElement.nextElementSibling.style.cssText = "max-height:500px;";
}
}
</script>

JavaScript this

JavaScript this refers to the object it belongs to. In this case, it refers to the clicked + or x sign, which is used to open or close the answer section of a question.

JavaScript parentElement

JavaScript parentElement returns the parent element of the selected HTML element.

In this case it is used to select the parent p tag which is used to define each question.

JavaScript nextElementSibling

JavaScript nextElementSibling returns the HTML element present in the same tree level, immediately after the selected HTML element.

In this case, it is used to target the answer of each question defined with the help of p tag, which is immediate next sibling of it's relevant question.

JavaScript style Property

JavaScript style Property sets or returns the CSSStyleDeclaration object of the selected HTML element.

In this example, it is used along with cssText Property, to change the height of the answers of the questions.

JavaScript cssText Property

JavaScript cssText Property sets or returns the style declaration of HTML element as a string.

Demo

Check Demo

Video Tutorial

Watch our video tutorial on How To Make Simple FAQ Accordion With HTML CSS and JavaScript.