How to Add an FAQ Accordion to WordPress Without a Plugin

Before you start

Write useful questions before selecting the visual treatment. An accordion is appropriate when visitors can choose which explanation they need. It is less appropriate for essential warnings or instructions everyone must read. Do not hide a critical installation restriction inside a closed answer merely to shorten the visible page.

How the accordion works

A details element contains one summary followed by the answer. The browser supplies the opening and closing behavior, keyboard support, and state semantics. This snippet does not recreate that behavior with clickable divs, hidden checkboxes, or a custom animation handler.

The summary receives padding, a readable weight, and a focus outline. A scoped details[open] summary selector applies the purple accent to expanded questions. The answer paragraph has its own spacing and line height. Because the animation is not forced, opening a long answer does not require guessing its height or clipping it inside a fixed-height transition.

Each item can open separately. If your product truly requires a single-open accordion, native grouping support and browser requirements need a separate decision. The supplied version deliberately uses independent items, keeping compatibility and comparison behavior straightforward. There is no JavaScript tab because no script is needed.

Install it in WordPress

1. Create a draft page and insert a Custom HTML block where the questions should appear.
2. Paste the full section, including its heading and three details elements. Keep one summary at the beginning of each item.
3. Replace the questions and answers with accurate content for your page. You can add ordinary paragraphs or lists inside an answer when useful.
4. Install the scoped CSS through your available custom CSS interface. Read how to add CSS to WordPress if your theme uses a different Styles or Customizer workflow.
5. Save and preview the front end. Open every answer, tab through the questions, and activate them with Enter or Space.

The same page-level markup works in block and classic themes when the account can save it. Elementor users can use an HTML widget and an available styling route. A restricted role may sanitize markup or inline styles, so check the saved front-end output rather than relying only on the editor preview. The separate HTML and stylesheet approach avoids assuming an embedded style element is accepted everywhere.

WordPress 7.0’s Custom HTML CSS panel requires unfiltered_html. This example needs no JavaScript panel, but the CSS still needs a permitted installation path. The general code setup guide explains the difference between editor capability and the fact that HTML is browser-native.

Write helpful questions and answers

Use the actual language visitors use when they are uncertain. “Which files do I install?” is more useful than “What is your innovative solution?” Keep the answer focused on that question and link to a full guide when the explanation becomes lengthy.

For example, an event page can explain how the countdown’s timezone relates to the visitor’s local time. A code download page can explain how its copy button handles browser permissions. Those contextual links solve a question instead of filling a list of unrelated recommendations.

Do not fabricate customer questions, reviews, or policy claims to make the accordion look complete. Replace sample copy with information you can stand behind. An accordion is not automatically FAQ structured data, and adding search markup does not guarantee a rich result. The supplied code makes no such claim.

Customize the design

Change --iljs-accent for expanded question text and --iljs-radius if you adapt the outer styling vocabulary. The individual details items use a 10-pixel border radius, which you can edit independently. Change the soft #fbf8ff background and #eaddf8 border together if your palette is different.

Adjust the maximum width of .iljs-faq to match your content column. It remains responsive because the shared root uses the available width. Increase summary padding for a larger click target. Do not shrink the text so that several long questions fit a desktop screenshot; allow them to wrap naturally.

The native marker remains visible. Removing it without supplying a clear replacement can make the questions look like static headings. If you add a decorative icon, ensure it does not become the only indication of state and keep it out of the accessible name when its meaning is already conveyed by the control.

Troubleshoot common issues

Clicking a question does nothing. Inspect the front-end HTML. Some editors or content filters may alter the details structure. Confirm that summary is a direct child at the start of its item.

All questions look expanded. A theme rule may force hidden detail content to display, or your markup may contain the open attribute on each item. Remove unintended open attributes and inspect global styles before adding JavaScript.

The answer is cut off. Check for inherited fixed heights or overflow rules. This snippet does not impose an answer height. Let the detail content expand normally rather than calculating a hard-coded maximum.

There are awkward nested links in the question. Keep the summary itself focused on the toggle action. Put follow-up links inside the answer so activating a question does not compete with navigating elsewhere.

The purple color is absent. Confirm the .iljs-faq wrapper and its accent variable exist. A custom block class alone may not match this entire structure; the class assignment guide explains how to inspect the wrapper you actually have.

Accessibility and mobile

Native summary controls are keyboard-operable. Keep the visible focus outline, readable text, and adequate spacing. Do not add a second button inside summary unless you are deliberately building and testing a more complex control. The browser already exposes the expansion state; duplicating it manually can create contradictory information.

Independent answers can stay open together, reducing the need to remember content while moving between questions. Long answers should use real paragraphs and lists. Phone layouts can wrap the summary without shifting an absolute-positioned icon over the text. There is no forced animation, flashing, or autoplay to manage.

Frequently asked questions

Can I open an answer initially?

Yes. Add the boolean open attribute to that item’s details. Choose that only when the answer is useful immediately; it does not need the string open="true".

Can an answer contain more than one paragraph?

Yes. Adjust the scoped answer styling if you add lists, tables, or other elements. Keep those elements semantic and ensure they do not overflow a small screen.

Does this need an accordion plugin?

No plugin is needed for the browser behavior. Your site’s permissions may still require an approved method to install custom markup or styling.

Check your installation

Open every answer with a mouse and keyboard, inspect long question wrapping on a phone, and confirm the content is accurate. The accordion is finished when visitors can both find and understand the information it holds.