Table of Contents
- Introduction
- FAQ Accordion Layout in HTML (index.html)
- Styling Accordion using CSS (styles.css)
- Using jQuery to display answers (script.js)
Introduction
Ever wondered if we could create a FAQ Accordion like Bootstrap using only HTML, CSS, JavaScript and jQuery on your own. The answer is YES.
Sample Bootstrap Accordion: https://getbootstrap.com/docs/5.0/components/accordion/Below is the accordion project sample image:
FAQ Accordion Layout in HTML (index.html)
The layout for this project contains a div with class “accordion” with a heading and other divs with class “faq” that holds the question and answer making up an accordion. We are importing font-awesome icons to use arrows in the project and jQuery library using CDN.
View Other Projects Here<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<!-- Import font awesome icons css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Import jquery via cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="accordion">
<h1> FAQ Accordion </h1>
<div class="faq">
<div class="question">
<i class="fas fa-arrow-right"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, ex.
</div>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias veritatis similique, a atque natus tempore eligendi minus voluptate exercitationem omnis quas dolore cupiditate incidunt impedit? Ipsam, nisi adipisci? Magni unde similique, voluptates corrupti odit! Harum hic officia corporis earum iusto tempora saepe eveniet veniam, sed, sequi ratione voluptas architecto, tenetur.
</div>
</div>
<div class="faq">
<div class="question">
<i class="fas fa-arrow-right"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, ex.
</div>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias veritatis similique, a atque natus tempore eligendi minus voluptate exercitationem omnis quas dolore cupiditate incidunt impedit? Ipsam, nisi adipisci? Magni unde similique, voluptates corrupti odit! Harum hic officia corporis earum iusto tempora saepe eveniet veniam, sed, sequi ratione voluptas architecto, tenetur.
</div>
</div>
<div class="faq">
<div class="question">
<i class="fas fa-arrow-right"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, ex.
</div>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias veritatis similique, a atque natus tempore eligendi minus voluptate exercitationem omnis quas dolore cupiditate incidunt impedit? Ipsam, nisi adipisci? Magni unde similique, voluptates corrupti odit! Harum hic officia corporis earum iusto tempora saepe eveniet veniam, sed, sequi ratione voluptas architecto, tenetur.
</div>
</div>
<div class="faq">
<div class="question">
<i class="fas fa-arrow-right"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, ex.
</div>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias veritatis similique, a atque natus tempore eligendi minus voluptate exercitationem omnis quas dolore cupiditate incidunt impedit? Ipsam, nisi adipisci? Magni unde similique, voluptates corrupti odit! Harum hic officia corporis earum iusto tempora saepe eveniet veniam, sed, sequi ratione voluptas architecto, tenetur.
</div>
</div>
<div class="faq">
<div class="question">
<i class="fas fa-arrow-right"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, ex.
</div>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias veritatis similique, a atque natus tempore eligendi minus voluptate exercitationem omnis quas dolore cupiditate incidunt impedit? Ipsam, nisi adipisci? Magni unde similique, voluptates corrupti odit! Harum hic officia corporis earum iusto tempora saepe eveniet veniam, sed, sequi ratione voluptas architecto, tenetur.
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Styling Accordion using CSS (styles.css)
We are using body as the parent container and declared it as a flexbox to center the accordion in the center of the page. We are hiding the answers for each FAQ and displaying it only when the relevant question is clicked.
Font-awesome CDN Link: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
font-family: sans-serif;
background: brown;
height: 100vh;
align-items: center;
}
.accordion {
width: 900px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1rem;
padding: 20px;
background: rgba(255,255,255,0.3);
border-radius: 20px;
}
.accordion .faq {
width: 100%;
padding: 10px;
background: #333;
color: #fff;
border-radius: 10px;
transition: all 0.3s;
}
.accordion .faq:hover {
background: #555;
}
.faq .question {
font-size: 20px;
cursor: pointer;
}
.faq .answer {
font-size: 17px;
line-height: 30px;
padding-left: 15px;
margin-top: 15px;
display: none;
}Using jQuery to display answers (script.js)
The script for this project is using jQuery. We are listening to click event on questions and sliding up/showing the answer of the respective question. Also, hiding all other answers if open.
jQuery CDN Link: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js$('.question').click(function() {
$.each($('.question'), function(index, question) {
$(question).next().slideUp("slow");
$(this).find('i').removeClass("fa-arrow-down").addClass("fa-arrow-right");
});
if($(this).next().is(":visible")) {
$(this).next().slideUp("slow");
$(this).find('i').removeClass("fa-arrow-down").addClass("fa-arrow-right");
} else {
$(this).next().slideDown("slow");
$(this).find('i').removeClass("fa-arrow-right").addClass("fa-arrow-down");
}
});