How to Add an FAQ Accordion in Blogger (With FAQ Schema)

An accordion keeps long answers out of the way until a reader asks for them. It's perfect for FAQ sections: readers scan the questions and open only the ones they care about. The theme gives you three styles, an option to keep only one answer open, and FAQ structured data for Google with no extra work.

Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

How it's built

Each question is a <details> tag. The question goes in <summary>, and the answer goes right after it. Wrap all the questions in <div class="accordion">.

<div class="accordion">
  <details>
    <summary>Your question?</summary>
    <p>Your answer.</p>
  </details>
  <details>
    <summary>Another question?</summary>
    <p>Another answer.</p>
  </details>
</div>

An answer can hold more than one paragraph, a list, or even an image. Put everything after the <summary>.

The three styles

1. Lines

This is the default. Clean rows with an arrow that turns when a question opens, and the open question changes color.

<div class="accordion">...</div>

2. Cards

Add card to put each question in its own card. The open card gets a colored border, and its + turns into ×.

<div class="accordion card">...</div>

3. Numbered

Add number to put all the questions in one box and number them.

<div class="accordion number">...</div>

Options

Open a question from the start

Add open to a <details> tag to show that answer when the page loads.

<details open>
  <summary>Your question?</summary>
  <p>Your answer.</p>
</details>

Only one answer open at a time

Add single to the group. When a reader opens a question, the one that was open closes. Try it here:

<div class="accordion card single">...</div>

FAQ rich results in Google

The theme reads the questions and answers from every accordion in a post and adds FAQ structured data to the page for you. This helps Google understand that the post answers these questions.

To leave a group out, for example a group that only shows examples like the ones above, add data-schema="off":

<div class="accordion" data-schema="off">...</div>

Google shows FAQ rich results only for some sites, so the data doesn't guarantee they'll appear. Keep your questions real and your answers short and useful. That is what counts.

These are this post's real questions, so they're the only group on this page that feeds the FAQ data:

Quick reference

You want	Write
Lines	<div class="accordion">
Cards	<div class="accordion card">
Numbered	<div class="accordion number">
One answer open	add single
Open from the start	<details open>
Leave out of FAQ data	data-schema="off"