.faq-item { border-bottom: 1px solid #eee; }
.faq-item:last-child { border-bottom: none; }
.faq-question {
padding: 18px 25px;
cursor: pointer;
background: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #333;
transition: background 0.2s ease;
}
.faq-question:hover { background: #f0f0f0; }
.faq-answer {
display: none;
padding: 20px 25px;
line-height: 1.6;
color: #555;
background: #fff;
font-size: 15px;
}
.faq-icon {
font-style: normal;
font-size: 20px;
color: #0073aa;
transition: transform 0.3s ease;
}
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
function wpToggleFaq(elementId) {
var item = document.getElementById(elementId);
var isActive = item.className.indexOf('active') > -1;
var allItems = document.getElementsByClassName('faq-item');
for (var i = 0; i < allItems.length; i++) {
allItems[i].className = 'faq-item';
}
if (!isActive) {
item.className = 'faq-item active';
}
}
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "How does this improve my SEO performance?",
"acceptedAnswer": {
"@type": "Answer",
"text": "By structuring your content with clean HTML and semantically relevant headings, you make it easier for search engine crawlers to index your page."
}
}, {
"@type": "Question",
"name": "Is this block mobile responsive?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, the layout uses block-level elements and fluid widths, ensuring it adapts perfectly to smartphones and tablets."
}
}]
}
Frequently Asked Questions
How does this improve my SEO performance?
+
By structuring your content with clean HTML and semantically relevant headings, you make it easier for search engine crawlers to index your page. This block uses lightweight code to ensure fast loading times, a critical Core Web Vital.
Is this block mobile responsive?
+
Yes, the layout uses block-level elements and fluid widths, ensuring it adapts perfectly to smartphones, tablets, and desktop displays without any additional configuration.
Can I customize the styling easily?
+
Absolutely. The CSS is contained within a style tag at the top of the block. You can change colors, padding, and fonts directly to match your existing brand design.