Build a working FAQ with native HTML and no plugin

Goal: build a collapsible question and answer that works with a mouse and keyboard without JavaScript.

Prerequisite: a test HTML file or a WordPress Custom HTML block. Run the example below in preview first.

Use details as the answer container and make summary its first child; summary is the clickable question.

Replace the example question with “How long does website setup take?” and provide an accurate answer about your services.

Save the code and click the question. Its answer should open, then close when you click again.

Add the open attribute to details to show the answer initially. Even open=”false” opens it; remove the attribute to close it.

Add three more questions by repeating the structure. Keep each answer inside its own question container.

Apply the sample styles. Light text, padding, and a border improve readability on the dark background.

Tab to a question and try Enter or Space. The focus indicator should remain visible as the answer opens and closes.

Keep extra buttons and links out of summary in this exercise so the disclosure interaction stays clear.

Test at mobile width and 200% zoom. Long questions should wrap and answers should stay within the container.

Expected result: each question works independently, supports keyboard use, and contains a real answer. This markup alone does not promise a special Google search result.

Complete example code

<details class="practice-faq">
  <summary>How long does setup take?</summary>
  <p>Timing depends on the agreed project scope.</p>
</details>
<style>
.practice-faq { padding:1rem; background:#121c29; color:#f4f7fb; border:1px solid #60758d; border-radius:12px; }
.practice-faq summary { cursor:pointer; font-weight:700; }
.practice-faq summary:focus-visible { outline:3px solid #ffd36a; outline-offset:4px; }
</style>

Official sources

• MDN — details
• MDN — summary