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.

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

Video Tutorial

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

Responsive Sidebar Menu with CSS and JavaScript Cool CSS Button with Hover Animation Pure CSS Custom Radio Buttons Custom Emoji Radio Buttons with CSS Color Picker Design with HTML CSS and JavaScript Custom Radio Buttons with CSS Engraved HTML Buttons With CSS Neumorphic Buttons Design with CSS Cool Profile Card Design with HTML CSS Neumorphic Search Bar Design with HTML and CSS Simple Login Form with Placeholder Animation Pure CSS Button with Folded Corner Background Color Change Slider with HTML CSS and JavaScript 404 Page Not Found Template Design with HTML and CSS Movies Blog Card Design with HTML and CSS Simple CSS Border Animation with before and after Selector Custom Social Select Dropdown Menu with CSS and JavaScript Facebook Offline and Online Notification with CSS and JS New Year 2022 Text Animation with CSS and JS Change Placeholder Color using CSS Custom Select Tag DropDown with CSS and JavaScript Simple Price Range Slider With HTML CSS and JavaScript Profile Card With Hover Effect using HTML and CSS Circle With Two Colors using CSS Simple FAQ Accordion With HTML CSS and JavaScript
How to Change Image on Hover with JavaScript How to Disable Button by Class Name in JavaScript How To Change Image Size with JavaScript How to change Image opacity with JavaScript How to Change image src on click with JavaScript How to get the lang attribute value in JavaScript How to Get attribute Value using JavaScript How To Check if Attribute Exists or not with JavaScript How To Count number of links on Page with JavaScript How To Scroll Page to Bottom using JavaScript How To Detect Shift Key Press with JavaScript Change Text Color On Hover with JavaScript Hide and Show div using JavaScript Get Button text with JavaScript Get textarea value with JavaScript Get table row Height with JavaScript Auto Increase width of input field with JavaScript Set Textarea maxLength with JavaScript Set Textarea Value with JavaScript JavaScript Count list items JavaScript set input field value Count Button Clicks with JavaScript Scroll Page to the Top on Click with JavaScript Change id of Element with JavaScript JavaScript Change li Text Color