.faq-block-item { border-bottom: 1px solid #e1e1e1; margin-bottom: 0; }
.faq-block-question { width: 100%; padding: 15px 20px; text-align: left; background: #ffffff; border: none; outline: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.faq-block-question:hover { background: #f9f9f9; }
.faq-block-title { font-size: 18px; font-weight: 600; margin: 0; color: #2c3e50; }
.faq-block-icon { font-size: 20px; color: #777; transition: transform 0.3s; }
.faq-block-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fff; }
.faq-block-inner { padding: 0 20px 20px 20px; font-size: 16px; color: #555; }
.faq-block-item.is-active .faq-block-answer { max-height: 500px; }
.faq-block-item.is-active .faq-block-icon { transform: rotate(45deg); }
<button class="faq-block-question" onclick="var item = this.parentElement; var wasActive = item.classList.contains('is-active'); var allItems = document.querySelectorAll('.faq-block-item'); for(var i=0; i
Why should I use this HTML block for WordPress?
This block is optimized for PageSpeed and Core Web Vitals. It uses minimal, vanilla JavaScript and clean CSS, ensuring that your site remains fast while providing an interactive user experience and structured data for search engines.
<button class="faq-block-question" onclick="var item = this.parentElement; var wasActive = item.classList.contains('is-active'); var allItems = document.querySelectorAll('.faq-block-item'); for(var i=0; i
How does this improve SEO?
By integrating JSON-LD schema directly into the HTML block, you help search engines understand the content structure. This increases the likelihood of your site appearing in rich snippets, which can significantly boost click-through rates (CTR).
<button class="faq-block-question" onclick="var item = this.parentElement; var wasActive = item.classList.contains('is-active'); var allItems = document.querySelectorAll('.faq-block-item'); for(var i=0; i
Is it mobile responsive?
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Why should I use this HTML block for WordPress?",
"acceptedAnswer": {
"@type": "Answer",
"text": "This block is optimized for PageSpeed and Core Web Vitals. It uses minimal, vanilla JavaScript and clean CSS."
}
}, {
"@type": "Question",
"name": "How does this improve SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "By integrating JSON-LD schema directly into the HTML block, you help search engines understand the content structure and increase rich snippet chances."
}
}, {
"@type": "Question",
"name": "Is it mobile responsive?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, the design uses fluid layouts and simple block elements that automatically adapt to any screen size."
}
}]
}
Yes, the design uses fluid layouts and simple block elements that automatically adapt to any screen size, providing a seamless experience for users on mobile, tablet, and desktop devices.