HTML Template
147 lines
6.7 KB
FAQ Accordion Page
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Accordion Page</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0a0a0f;
color: #e4e4e7;
padding: 3rem 1rem;
}
.container { max-width: 720px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 2.5rem; }
.header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.header p { color: #71717a; }
.category-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.tab {
padding: 0.5rem 1.25rem;
background: #18181b;
border: 1px solid #27272a;
border-radius: 999px;
color: #71717a;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s;
}
.tab.active, .tab:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
background: #18181b;
border: 1px solid #27272a;
border-radius: 12px;
overflow: hidden;
transition: border-color 0.3s;
}
.faq-item:hover { border-color: #3f3f46; }
.faq-question {
padding: 1.25rem 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 0.95rem;
color: #e4e4e7;
transition: background 0.3s;
}
.faq-question:hover { background: #27272a; }
.faq-icon {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
color: #6366f1;
transition: transform 0.3s;
font-size: 1.2rem;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 1.5rem;
color: #a1a1aa;
font-size: 0.9rem;
line-height: 1.6;
}
.faq-item.open .faq-answer { max-height: 200px; padding: 0 1.5rem 1.25rem; }
.contact-box {
text-align: center;
margin-top: 2.5rem;
padding: 1.5rem;
background: #18181b;
border: 1px solid #27272a;
border-radius: 12px;
}
.contact-box p { color: #71717a; font-size: 0.9rem; margin-bottom: 1rem; }
.contact-box a {
color: #6366f1;
text-decoration: none;
font-weight: 600;
}
.contact-box a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Frequently Asked Questions</h1>
<p>Find answers to common questions below</p>
</div>
<div class="category-tabs">
<div class="tab active" onclick="filterFAQ('all', this)">All</div>
<div class="tab" onclick="filterFAQ('account', this)">Account</div>
<div class="tab" onclick="filterFAQ('billing', this)">Billing</div>
<div class="tab" onclick="filterFAQ('tech', this)">Technical</div>
</div>
<div class="faq-list" id="faqList">
<div class="faq-item" data-cat="account">
<div class="faq-question" onclick="toggleFAQ(this)">How do I create an account? <span class="faq-icon">+</span></div>
<div class="faq-answer">Click the "Sign Up" button at the top right, enter your email and password, and verify your email address to activate your account.</div>
</div>
<div class="faq-item" data-cat="account">
<div class="faq-question" onclick="toggleFAQ(this)">How do I reset my password? <span class="faq-icon">+</span></div>
<div class="faq-answer">Click "Forgot Password" on the login page, enter your email, and follow the link sent to your inbox to set a new password.</div>
</div>
<div class="faq-item" data-cat="billing">
<div class="faq-question" onclick="toggleFAQ(this)">What payment methods do you accept? <span class="faq-icon">+</span></div>
<div class="faq-answer">We accept all major credit cards, PayPal, UPI, and bank transfers. For enterprise plans, we also support invoice billing.</div>
</div>
<div class="faq-item" data-cat="billing">
<div class="faq-question" onclick="toggleFAQ(this)">Can I get a refund? <span class="faq-icon">+</span></div>
<div class="faq-answer">Yes, we offer a 14-day money-back guarantee on all paid plans. Contact support within 14 days of purchase for a full refund.</div>
</div>
<div class="faq-item" data-cat="tech">
<div class="faq-question" onclick="toggleFAQ(this)">Is there an API available? <span class="faq-icon">+</span></div>
<div class="faq-answer">Yes, our API is available on Pro and Enterprise plans. Check our API documentation for endpoints, rate limits, and authentication details.</div>
</div>
<div class="faq-item" data-cat="tech">
<div class="faq-question" onclick="toggleFAQ(this)">Do you offer SSO integration? <span class="faq-icon">+</span></div>
<div class="faq-answer">Single Sign-On (SSO) with SAML 2.0 and OAuth 2.0 is available on the Enterprise plan. Contact our team for setup assistance.</div>
</div>
</div>
<div class="contact-box">
<p>Still have questions? We're here to help.</p>
<a href="#">Contact Support →</a>
</div>
</div>
<script>
function toggleFAQ(el) {
const item = el.parentElement;
const isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
if (!isOpen) item.classList.add('open');
}
function filterFAQ(cat, tab) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
document.querySelectorAll('.faq-item').forEach(item => {
item.style.display = (cat === 'all' || item.dataset.cat === cat) ? '' : 'none';
});
}
</script>
</body>
</html>