.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: 16px 20px;
background-color: #ffffff;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #1a202c;
transition: background-color 0.2s ease;
}
.faq-question:hover {
background-color: #f7fafc;
}
.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
background-color: #fff;
color: #4a5568;
line-height: 1.6;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.faq-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.active .faq-answer {
max-height: 500px;
padding: 16px 20px;
}
.active .faq-icon {
transform: rotate(180deg);
}
How does this improve SEO rankings?
This block uses clean HTML structures and includes integrated JSON-LD Schema markup, which helps search engines understand your content better and can trigger Rich Snippets in SERPs.
Is this mobile responsive?
Yes, the layout uses fluid width and block-level elements that adapt to any screen size, ensuring a seamless experience for mobile users and improving Core Web Vitals.
Can I add more questions easily?
Simply duplicate the "faq-item" div structure within the container. The JavaScript logic is delegated to the onclick event, so new items work automatically without extra coding.
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "How does this improve SEO rankings?",
"acceptedAnswer": {
"@type": "Answer",
"text": "This block uses clean HTML structures and includes integrated JSON-LD Schema markup, which helps search engines understand your content better."
}
}, {
"@type": "Question",
"name": "Is this mobile responsive?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, the layout uses fluid width and block-level elements that adapt to any screen size."
}
}, {
"@type": "Question",
"name": "Can I add more questions easily?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Simply duplicate the faq-item div structure within the container. The JavaScript logic is delegated to the onclick event."
}
}]
}
function toggleFaqItem(element) {
var parent = element.parentElement;
var isOpen = parent.classList.contains('active');
var allItems = document.querySelectorAll('.faq-item');
for (var i = 0; i < allItems.length; i++) {
allItems[i].classList.remove('active');
}
if (!isOpen) {
parent.classList.add('active');
}
}