.wp-seo-accordion { max-width: 100%; margin: 20px 0; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.faq-item { border-bottom: 1px solid #e2e8f0; }
.faq-item:last-child { border-bottom: none; }
.faq-question { background: #f8fafc; padding: 18px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #1e293b; transition: background 0.2s; }
.faq-question:hover { background: #f1f5f9; }
.faq-answer { display: none; padding: 20px 25px; line-height: 1.6; color: #475569; background: #fff; border-top: 1px solid #f1f5f9; }
.faq-icon { transition: transform 0.3s ease; font-size: 1.2em; }
.active .faq-icon { transform: rotate(180deg); }
.active .faq-answer { display: block; }
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var all = document.querySelectorAll('.faq-item'); for(var i=0; i
How does this component improve SEO?
▼
This component uses valid JSON-LD and Microdata schema markup, which helps search engines understand your content better and can trigger rich snippets (FAQ arrows) in Google Search results.
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var all = document.querySelectorAll('.faq-item'); for(var i=0; i
Is this mobile friendly?
▼
Yes, it uses a block-level responsive layout that adjusts perfectly to any screen size, ensuring a high PageSpeed Insights score and a great user experience on smartphones.
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var all = document.querySelectorAll('.faq-item'); for(var i=0; i
Can I add more questions?
▼
Absolutely. You can duplicate the "faq-item" div structure as many times as needed. Ensure each question and answer text is updated within the relevant schema tags.
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "How does this component improve SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "This component uses valid JSON-LD and Microdata schema markup, which helps search engines understand your content better and can trigger rich snippets in Google Search results."
}
}, {
"@type": "Question",
"name": "Is this mobile friendly?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, it uses a block-level responsive layout that adjusts perfectly to any screen size, ensuring a high PageSpeed Insights score."
}
}, {
"@type": "Question",
"name": "Can I add more questions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Absolutely. You can duplicate the faq-item div structure as many times as needed."
}
}]
}