DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
FAQs - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
FAQs
abhishek001
Jan 25, 2026
6
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="container"> <h1>Frequently Asked Questions</h1> <p class="subtitle">Find answers to common questions about our services</p> <div class="accordion"> <!-- Item 1 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">💡</span> <span class="accordion-title">What is your product about?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>Our product is a comprehensive solution designed to help businesses streamline their workflows and increase productivity. We offer cutting-edge features that make your daily tasks easier and more efficient.</p> </div> </div> <!-- Item 2 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">💰</span> <span class="accordion-title">How much does it cost?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>We offer flexible pricing plans starting from $9/month for individuals, $29/month for small teams, and custom enterprise solutions. All plans come with a 14-day free trial, no credit card required.</p> </div> </div> <!-- Item 3 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">🚀</span> <span class="accordion-title">How do I get started?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>Getting started is simple! Just click the "Sign Up" button, create your account, and you'll be guided through our onboarding process. Our team is available 24/7 to help you set up everything.</p> </div> </div> <!-- Item 4 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">🔒</span> <span class="accordion-title">Is my data secure?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>Absolutely! We use industry-standard encryption and security protocols. Your data is stored on secure servers with regular backups, and we're fully compliant with GDPR and other privacy regulations.</p> </div> </div> <!-- Item 5 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">🤝</span> <span class="accordion-title">Do you offer customer support?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>Yes! We provide 24/7 customer support via email, live chat, and phone. Our dedicated support team is always ready to help you with any questions or issues you might encounter.</p> </div> </div> <!-- Item 6 --> <div class="accordion-item"> <button class="accordion-header"> <span class="accordion-icon">📱</span> <span class="accordion-title">Is there a mobile app?</span> <span class="accordion-arrow"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> </svg> </span> </button> <div class="accordion-content"> <p>Yes, we have native mobile apps for both iOS and Android. You can download them from the App Store or Google Play Store. All your data syncs seamlessly across all devices.</p> </div> </div> </div> </div>
1
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 3rem 1rem; } .container { max-width: 800px; margin: 0 auto; } h1 { text-align: center; color: white; font-size: 2.5rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .subtitle { text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: 3rem; } .accordion { display: flex; flex-direction: column; gap: 1rem; } .accordion-item { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .accordion-item:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .accordion-header { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: white; border: none; cursor: pointer; text-align: left; font-size: 1.1rem; font-weight: 600; color: #2d3748; transition: all 0.3s ease; } .accordion-header:hover { background: #f7fafc; } .accordion-icon { font-size: 1.5rem; flex-shrink: 0; } .accordion-title { flex: 1; } .accordion-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #f7fafc; border-radius: 50%; color: #667eea; transition: all 0.3s ease; } .accordion-item.active .accordion-arrow { transform: rotate(180deg); background: #667eea; color: white; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .accordion-item.active .accordion-content { max-height: 500px; padding: 0 1.5rem 1.5rem 1.5rem; } .accordion-content p { color: #4a5568; line-height: 1.7; font-size: 1rem; } .accordion-item.active .accordion-header { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); color: #667eea; } /* Responsive */ @media (max-width: 768px) { h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } .accordion-header { padding: 1.25rem; font-size: 1rem; } .accordion-icon { font-size: 1.25rem; } .accordion-content p { font-size: 0.95rem; } }
1
const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', function() { const item = this.parentElement; const isActive = item.classList.contains('active'); // Close all items document.querySelectorAll('.accordion-item').forEach(i => { i.classList.remove('active'); }); // Open clicked item if it wasn't active if (!isActive) { item.classList.add('active'); } }); });
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!