.seo-faq-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.faq-item {
border-bottom: 1px solid #e2e8f0;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
padding: 18px 25px;
background-color: #ffffff;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #1a202c;
transition: background-color 0.2s;
}
.faq-question:hover {
background-color: #f8fafc;
}
.faq-answer {
padding: 0 25px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
background-color: #ffffff;
color: #4a5568;
line-height: 1.6;
}
.faq-icon {
width: 20px;
height: 20px;
transition: transform 0.3s;
}
.active .faq-answer {
padding: 10px 25px 20px 25px;
max-height: 500px;
}
.active .faq-icon {
transform: rotate(180deg);
}
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var items = document.querySelectorAll('.faq-item'); for(var i=0; i
What is the benefit of using an SEO FAQ section?
Adding an FAQ section with proper Schema markup helps search engines understand your content better and can lead to rich snippets in Google search results, increasing your click-through rate (CTR).
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var items = document.querySelectorAll('.faq-item'); for(var i=0; i
Is this code compatible with WordPress?
Yes, this code is specifically designed for the WordPress Custom HTML block. It uses inline JavaScript and encapsulated CSS to ensure functionality without external dependencies.
<div class="faq-question" onclick="var p = this.parentElement; var isA = p.classList.contains('active'); var items = document.querySelectorAll('.faq-item'); for(var i=0; i
How do I customize the colors?
You can easily modify the background-color and color properties in the <style> block at the top of this code to match your website's branding.
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "What is the benefit of using an SEO FAQ section?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Adding an FAQ section with proper Schema markup helps search engines understand your content better and can lead to rich snippets in Google search results."
}
}, {
"@type": "Question",
"name": "Is this code compatible with WordPress?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, this code is specifically designed for the WordPress Custom HTML block using inline logic and standard CSS."
}
}, {
"@type": "Question",
"name": "How do I customize the colors?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Modify the CSS properties in the style block to match your site's design."
}
}]
}