Clean, Modern Design:
- Card-based layout with subtle shadows
- Smooth color transitions and animations
- Fully responsive for all devices
Interactive Elements:
- Animated expand/collapse with smooth transitions
- Plus/minus icons that transform when clicked
- Hover effects on questions
Search Functionality:
- Live search filters questions and answers
- "No results" message appears when no matches found
- Search looks in both questions and answers
Accessibility Considerations:
- Proper heading hierarchy
- Clear visual feedback for interactions
- Keyboard navigable
Customizable:
- Easily change colors using CSS variables
- Add or remove FAQ items as needed
- Adjust animation speeds
To implement this in your project:
Copy the entire code
Replace the placeholder questions and answers with your content
Customize colors by changing the values in the :root CSS variables
Add more FAQ items by duplicating the .faq-item div structure
The JavaScript handles all the interactivity automatically, so no additional setup is needed beyond adding your content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern FAQ Section</title>
</head>
<body>
<div class="container">
<div class="faq-header">
<h1>Frequently Asked Questions</h1>
<p>Find answers to common questions about our products and services.</p>
</div>
<div class="search-container">
<span class="search-icon">🔍</span>
<input type="text" id="faqSearch" placeholder="Search FAQs...">
</div>
<div class="faq-list" id="faqList">
<div class="faq-item">
<div class="faq-question">
<span>How do I create an account?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>Creating an account is simple! Just click on the "Sign Up" button at the top right corner of our website, fill in your details including your email address and a secure password, and you'll be ready to go. We'll send you a confirmation email to verify your account.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>What payment methods do you accept?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers. For enterprise customers, we also offer invoice payments with net 30 terms. All transactions are securely processed with 256-bit SSL encryption.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>Can I cancel my subscription anytime?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>Yes, you can cancel your subscription at any time with no cancellation fees. When you cancel, you'll continue to have access to the service until the end of your current billing period. You can cancel directly from your account settings.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>How do I reset my password?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>If you've forgotten your password, go to the login page and click on "Forgot Password." Enter the email address associated with your account, and we'll send you a link to reset your password. The link will expire in 24 hours for security reasons.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>Is there a mobile app available?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>Yes! We have native iOS and Android apps available for download in their respective app stores. Our mobile apps offer all the functionality of the web version with additional features like offline access and mobile notifications.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>What's your refund policy?</span>
<div class="faq-icon"></div>
</div>
<div class="faq-answer">
<p>We offer a 30-day money-back guarantee on all our plans. If you're not satisfied with our service, simply contact our support team within 30 days of your initial purchase for a full refund. After 30 days, we offer prorated refunds for unused portions of annual plans.</p>
</div>
</div>
</div>
<div class="no-results" id="noResults">
<p>No FAQs matched your search. Try different keywords.</p>
</div>
</div>
</body>
</html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.
/* Base Styles */
:root {
--primary-color: #4a6bff;
--text-color: #333;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--dark-gray: #6c757d;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #f5f7ff;
padding: 40px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
/* FAQ Header */
.faq-header {
text-align: center;
margin-bottom: 40px;
}
.faq-header h1 {
font-size: 2.5rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.faq-header p {
font-size: 1.1rem;
color: var(--dark-gray);
max-width: 600px;
margin: 0 auto;
}
/* FAQ Item */
.faq-item {
background: white;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.faq-question {
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
}
.faq-question:hover {
color: var(--primary-color);
}
.faq-icon {
width: 24px;
height: 24px;
position: relative;
transition: var(--transition);
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
background-color: var(--primary-color);
transition: var(--transition);
}
.faq-icon::before {
width: 16px;
height: 2px;
left: 4px;
top: 11px;
}
.faq-icon::after {
width: 2px;
height: 16px;
left: 11px;
top: 4px;
}
/* Active State */
.faq-item.active .faq-icon::after {
transform: rotate(90deg);
opacity: 0;
}
.faq-item.active .faq-icon::before {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
padding: 0 25px;
color: var(--dark-gray);
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 25px 20px;
}
/* Search Box */
.search-container {
margin-bottom: 30px;
position: relative;
}
.search-container input {
width: 100%;
padding: 15px 20px;
border: 2px solid var(--medium-gray);
border-radius: 50px;
font-size: 1rem;
transition: var(--transition);
padding-left: 50px;
}
.search-container input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2);
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--dark-gray);
}
/* No Results Message */
.no-results {
text-align: center;
padding: 30px;
color: var(--dark-gray);
display: none;
}
/* Responsive */
@media (max-width: 768px) {
.faq-header h1 {
font-size: 2rem;
}
.faq-question {
padding: 15px 20px;
font-size: 1rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
const faqItems = document.querySelectorAll('.faq-item');
const faqSearch = document.getElementById('faqSearch');
const faqList = document.getElementById('faqList');
const noResults = document.getElementById('noResults');
// Toggle FAQ items
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
// Close all other items
if (!item.classList.contains('active')) {
faqItems.forEach(otherItem => {
if (otherItem !== item && otherItem.classList.contains('active')) {
otherItem.classList.remove('active');
}
});
}
// Toggle current item
item.classList.toggle('active');
});
});
// Search functionality
faqSearch.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
let hasResults = false;
faqItems.forEach(item => {
const question = item.querySelector('.faq-question span').textContent.toLowerCase();
const answer = item.querySelector('.faq-answer p').textContent.toLowerCase();
if (question.includes(searchTerm) || answer.includes(searchTerm)) {
item.style.display = '';
hasResults = true;
} else {
item.style.display = 'none';
}
});
// Show/hide no results message
if (hasResults || searchTerm === '') {
noResults.style.display = 'none';
} else {
noResults.style.display = 'block';
}
});
// Open first FAQ by default
if (faqItems.length > 0) {
faqItems[0].classList.add('active');
}
});
Post a Comment
Thank you
Learning robo team