In Breakdance use an Advanced Accordion and give it the class faq-accordion.
Ensure content is in a rich text block.
When content is added in insert the following in a code block above the content in the PHP & HTML section.
Make this as a global block if you want, go into the global block and add a empty div with a dark background and 50px height. When you add this global block to the page hide it on all breakpoints but leave it visible in the editor.
<script>
document.addEventListener('DOMContentLoaded', function() {
try {
const faqs = [];
// Select all accordion buttons inside the parent wrapper with class 'faq-accordion'
const faqAccordions = document.querySelectorAll('.faq-accordion .bde-accordion__button');
faqAccordions.forEach(button => {
const question = button.querySelector('.bde-accordion__title').innerText.trim(); // Get the question text
const panelId = button.getAttribute('aria-controls'); // Get the panel ID
const answerElement = document.querySelector(`#${panelId} .bde-rich-text`); // Target the correct answer element
if (answerElement) {
const answer = answerElement.innerText.trim(); // Extract the answer text
// Build the FAQ item schema
faqs.push({
"@type": "Question",
"name": question,
"acceptedAnswer": {
"@type": "Answer",
"text": answer
}
});
}
});
if (faqs.length > 0) {
// Create the JSON-LD script element for the FAQ schema
const faqSchemaScript = document.createElement('script');
faqSchemaScript.type = 'application/ld+json';
// Create the FAQ schema object
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": faqs
};
// Inject the schema as JSON string into the new script tag
faqSchemaScript.textContent = JSON.stringify(faqSchema, null, 2);
// Insert the schema above the first faq-accordion in the DOM
const faqSection = document.querySelector('.faq-accordion'); // Find the first .faq-accordion
if (faqSection) {
faqSection.parentNode.insertBefore(faqSchemaScript, faqSection); // Insert the schema script above the FAQs
}
// Log success
console.log('FAQ schema successfully created and added to the page.');
} else {
console.warn('No FAQs found to generate schema.');
}
} catch (error) {
console.error('An error occurred during the FAQ schema generation process:', error);
}
});
</script>
This is for Frequently Asked Questions module, add .faq-section as a class to the section the FAQ module is placed in:
<script>
document.addEventListener('DOMContentLoaded', function() {
try {
const faqs = [];
// Select all FAQ items with the class 'bde-faq__item'
const faqItems = document.querySelectorAll('.faq-section .bde-frequently-asked-questions .bde-faq__item');
faqItems.forEach(faqItem => {
// Extract the question from the button's span with the class 'bde-faq__title'
const questionElement = faqItem.querySelector('.bde-faq__title');
const answerElement = faqItem.querySelector('.bde-faq__answer-content .breakdance-rich-text-styles');
if (questionElement && answerElement) {
const question = questionElement.innerText.trim();
const answer = answerElement.innerText.trim();
// Build the FAQ item schema
faqs.push({
"@type": "Question",
"name": question,
"acceptedAnswer": {
"@type": "Answer",
"text": answer
}
});
}
});
if (faqs.length > 0) {
// Create the JSON-LD script element for the FAQ schema
const faqSchemaScript = document.createElement('script');
faqSchemaScript.type = 'application/ld+json';
// Create the FAQ schema object
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": faqs
};
// Inject the schema as JSON string into the new script tag
faqSchemaScript.textContent = JSON.stringify(faqSchema, null, 2);
// Insert the schema above the first FAQ section in the DOM
const faqSection = document.querySelector('.bde-frequently-asked-questions'); // Find the first FAQ wrapper
if (faqSection) {
faqSection.parentNode.insertBefore(faqSchemaScript, faqSection); // Insert the schema script above the FAQs
}
// Log success
console.log('FAQ schema successfully created and added to the page.');
} else {
console.warn('No FAQs found to generate schema.');
}
} catch (error) {
console.error('An error occurred during the FAQ schema generation process:', error);
}
});
</script>