Create Accordions & Toggles in WordPress with HTML and CSS Only

Last updated March 6th, 2025 at 10:34 am

What are accordions and toggles?

Accordions and Toggles are groupings of interactive web page design elements — perhaps most commonly associated with sets of FAQs — that organize and display content in a compact and user-friendly way.

Each element in an accordion and toggle group typically consists of two parts:

• a heading (e.g., a term, phrase, sentence, or question); and
• the “meat” or main content, which is usually a definition of the term, an answer to the question, and so on.

In both cases, clicking on the heading reveals the main content. Clicking on the heading again hides the main content.

According to the W3C, both of these design elements are technically disclosure widgets, defined by the details HTML elements, and optionally (but usually) consisting of a child element defined by the summary HTML element. Read about the details element and the summary element at the MDN website.

Accordions and toggles are essentially identical in all respects but one: With accordions, only one element can be expanded at a time; with toggles, there is no such restriction.

Examples

Click the headings in these examples to see how these element work.

Accordions and toggles in WordPress

Many WordPress themes have blocks or patterns for accordions and toggles. Also, there are more block addons for accordions and toggles than you can shake a stick at.

Why create accordions and toggles with custom HTML and CSS?

• Custom coded accordions and toggles are easy to make.
• Custom coded accordions and toggles are semantically sound; many block-generated accordions and toggles are not.
• Custom coded accordions and toggles are lightweight; block-generated accordions and toggles are not.

Screenshot of dueling accordions

Here’s a screenshot of a comparison demo I created. I made two sets of accordions with identical content. The one on top uses the Kadence Blocks accordion block. The on the bottom uses custom HTML.

Source code for accordion created by Kadence block

Here’s the source code of the HTML generated by the Kadence block. Note how it does not use the details or summary HTML elements — and how bloated it is with CSS classes.

<div class="kt-accordion-wrap kt-accordion-id3483_66aec7-e0 kt-accordion-has-4-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-left" style="max-width:none"><div class="kt-accordion-inner-wrap kt-accordion-initialized" data-allow-multiple-open="false" data-start-open="none">
<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane3483_9d4bad-89"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show" type="button" id="kt-accordion-header-381083" aria-controls="kt-accordion-panel-381083" data-kt-accordion-header-id="0" aria-expanded="false"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Heading 1</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel kt-accordion-panel-hidden" id="kt-accordion-panel-381083" aria-labelledby="kt-accordion-header-381083" role="region" data-panel-height="0px"><div class="kt-accordion-panel-inner">
<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.</p>
</div></div></div>

<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane3483_de0a7f-68"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show" type="button" id="kt-accordion-header-358125" aria-controls="kt-accordion-panel-358125" data-kt-accordion-header-id="1" aria-expanded="false"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Heading 2</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel kt-accordion-panel-hidden" id="kt-accordion-panel-358125" aria-labelledby="kt-accordion-header-358125" role="region" data-panel-height="0px"><div class="kt-accordion-panel-inner">
<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.</p>
</div></div></div>

<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane3483_71d895-61"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show" type="button" id="kt-accordion-header-700938" aria-controls="kt-accordion-panel-700938" data-kt-accordion-header-id="2" aria-expanded="false"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Heading 3</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel kt-accordion-panel-hidden" id="kt-accordion-panel-700938" aria-labelledby="kt-accordion-header-700938" role="region" data-panel-height="0px"><div class="kt-accordion-panel-inner">
<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.</p>
</div></div></div>

<div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane3483_830adf-21"><div class="kt-accordion-header-wrap"><button class="kt-blocks-accordion-header kt-acccordion-button-label-show" type="button" id="kt-accordion-header-777021" aria-controls="kt-accordion-panel-777021" data-kt-accordion-header-id="3" aria-expanded="false"><span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title">Heading 4</span></span><span class="kt-blocks-accordion-icon-trigger"></span></button></div><div class="kt-accordion-panel kt-accordion-panel-hidden" id="kt-accordion-panel-777021" aria-labelledby="kt-accordion-header-777021" role="region" data-panel-height="176px" style=""><div class="kt-accordion-panel-inner">
<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.</p>
</div></div></div>
</div></div>

Source code for custom-HTML-generated accordion

Here’s the source code of the HTML generated by the custom HTML — which is identical to the code I entered into the Custom HTML Gutenberg block. Notice how clean it is, with only two HTML elements (details and summary), one attribute (name, associated with the details element) and zero CSS classes.

<details name="accordion">
<summary>Heading 1</summary>
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
</details>
<details name="accordion">
<summary>Heading 2</summary>
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
</details>
<details name="accordion">
<summary>Heading 3</summary>
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
</details>
<details name="accordion">
<summary>Heading 4</summary>
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
</details>

What about the CSS?

An advantage of using an accordion block from your theme or from a block plugin is that it will have CSS rules built in.

However, styling disclosure widgets created with details and summary elements isn’t hard. Here are the CSS rules that style the examples at the top of the page:

details > summary {
	display: list-item;
	margin-block: 0;
	padding: 0;
	font-weight: bold;
}
summary:hover {
	cursor: pointer;
}
details {
	margin-block: 0.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
	line-height: 135%;
}
details[open] > summary {
	margin-bottom: 1em;
}

What do you think?

Any questions? Are you likely to roll your own accordions and toggles now? Would you like to see more articles like this? Do you have suggestions for doing things better, or in a different way? Leave a comment below.