Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide

November 7, 2024

This code creates an FAQ section where each question can be expanded or collapsed.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Section with Collapsible Answers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="faq-section">
<h2>Frequently Asked Questions</h2>

<div class="faq-item">
<input type="checkbox" id="faq1" hidden>
<label for="faq1" class="faq-question">What is your return policy?</label>
<div class="faq-answer">
<p>Our return policy allows returns within 30 days of purchase, provided the item is in its original condition.</p>
</div>
</div>

<div class="faq-item">
<input type="checkbox" id="faq2" hidden>
<label for="faq2" class="faq-question">Do you offer international shipping?</label>
<div class="faq-answer">
<p>Yes, we offer international shipping to selected countries. Please check our shipping policy for more details.</p>
</div>
</div>

<div class="faq-item">
<input type="checkbox" id="faq3" hidden>
<label for="faq3" class="faq-question">How can I track my order?</label>
<div class="faq-answer">
<p>You can track your order using the tracking link sent to your email once your order has shipped.</p>
</div>
</div>
</div>

</body>
</html>

CSS Code

The CSS styles the FAQ items to create the collapsible effect.

/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

/* FAQ Section Styling */
.faq-section {
width: 80%;
max-width: 600px;
margin: 50px auto;
}

.faq-section h2 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

/* FAQ Item Styling */
.faq-item {
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}

.faq-question {
display: block;
padding: 15px;
background-color: #f7f7f7;
cursor: pointer;
font-weight: bold;
color: #333;
position: relative;
transition: background-color 0.3s;
}

.faq-question:hover {
background-color: #e2e2e2;
}

/* Collapsible Answer */
.faq-answer {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease;
padding: 0 15px;
}

.faq-answer p {
padding: 15px 0;
color: #555;
}

/* Checkbox Toggle for FAQ */
#faq1:checked ~ .faq-answer,
#faq2:checked ~ .faq-answer,
#faq3:checked ~ .faq-answer {
max-height: 100px; /* Adjust based on answer content */
}

/* Indicator Icon */
.faq-question::after {
content: "+";
position: absolute;
right: 15px;
font-size: 18px;
transition: transform 0.3s;
}

/* Rotate Icon When Open */
#faq1:checked + .faq-question::after,
#faq2:checked + .faq-question::after,
#faq3:checked + .faq-question::after {
transform: rotate(45deg);
}

Explanation

Checkbox Toggle: Each FAQ item uses a hidden checkbox (id="faq1", etc.) to control whether the answer is shown or hidden. The checkbox toggles the visibility of .faq-answer.
FAQ Structure: Each question is a <label> that, when clicked, toggles the associated checkbox and opens or closes the answer.
Transition Effects: CSS transitions for max-height create a smooth opening and closing effect.
Icon Indicator: The ::after pseudo-element on .faq-question adds a “+” symbol, which rotates to show as an “x” when the FAQ is open.