.faq-item { border-bottom: 1px solid #e0e0e0; }
.faq-item:last-child { border-bottom: none; }
.faq-question { background: #f9f9f9; padding: 15px 20px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
.faq-question:hover { background: #f0f0f0; }
.faq-answer { display: none; padding: 15px 20px; background: #fff; color: #333; }
.faq-icon { transition: transform 0.3s; font-size: 1.2em; }
.faq-active .faq-answer { display: block; }
.faq-active .faq-icon { transform: rotate(45deg); }
var toggleFaq = function(id) {
var element = document.getElementById(id);
var allItems = document.querySelectorAll('.faq-item');
for (var i = 0; i < allItems.length; i++) {
if (allItems[i].id !== id) {
allItems[i].classList.remove('faq-active');
}
}
if (element.classList.contains('faq-active')) {
element.classList.remove('faq-active');
} else {
element.classList.add('faq-active');
}
};
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "How does this improve my WordPress SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "This component uses clean, semantic HTML and includes integrated JSON-LD schema to help search engines understand content and display Rich Results."
}
}, {
"@type": "Question",
"name": "Is this code mobile-friendly?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, it uses a fluid block-level layout that adapts to any screen size for optimal mobile performance."
}
}, {
"@type": "Question",
"name": "Can I customize the styling?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, all styles are inline and easily editable within the WordPress HTML block to match your brand."
}
}]
}
How does this improve my WordPress SEO?
This component uses clean, semantic HTML and includes integrated JSON-LD schema. This helps search engines understand your content better, potentially leading to Rich Results (FAQ snippets) in Google Search.
Is this code mobile-friendly?
Yes, it uses a fluid block-level layout that adapts to any screen size, ensuring a high PageSpeed Insights score and a better mobile user experience.
Can I customize the styling?
Absolutely. All styles are contained within the internal CSS block, allowing you to modify colors, fonts, and spacing to match your brand identity directly within the WordPress HTML block.