How to Fix FAQ Schema When Toggles Hide Content on Load

By Ryan York•

Learn how to ensure your FAQ schema is valid and visible to search engines, even when using toggles or accordions that hide content on page load.

How Can You Make FAQ Schema Work When Using Toggles or Accordions?

Using toggles or accordions for FAQs can cause issues with FAQ schema if the content is hidden on page load. Search engines may not see the hidden content, resulting in missing or invalid FAQ rich results.

Why This Happens

  • FAQ answers are hidden by default (e.g., display: none or hidden attribute)
  • JavaScript is required to reveal the content
  • Search engines may not execute JavaScript or may ignore hidden content

Example of a Problem

<div class="faq">
  <button>What is JSON-LD?</button>
  <div style="display: none;">JSON-LD is a method of encoding linked data using JSON.</div>
</div>

Problem: The answer is hidden on page load.

How to Fix

  • Ensure FAQ content is present in the HTML and not hidden by default
  • Use progressive enhancement: show answers by default, then hide with JavaScript after page load
  • Use aria-expanded and aria-hidden attributes for accessibility

Better Example:

<div class="faq">
  <button aria-expanded="true">What is JSON-LD?</button>
  <div>JSON-LD is a method of encoding linked data using JSON.</div>
</div>

Best Practices

  • Always render FAQ content in the initial HTML
  • Avoid hiding answers with CSS or JavaScript on page load
  • Validate your schema with Google's Rich Results Test

Conclusion

Properly structured and visible FAQ content ensures your schema is eligible for FAQ rich results and accessible to all users.