Follow the steps below to add an accordion page to a WordPress page.

  1. Navigate to the desired WordPress page.
    1. Ensure that you are signed in.
  2. Click Edit Page in the top banner.
  3. Find the desired location of the accordion
  4. Add an opening <h3> tag and a closing </h3> tag.
  5. Add an opening <div> tag and a closing </div> tag.
    1. In order for the accordion to work properly it MUST be setup with the <h3> <div> structure.

Below is example code from the Modernization FAQ page: URL: https://modernization.wsu.edu/faqs/

<h3>The Title for the header</h3>
<div>

Some text that we want hidden within an accordion (or expandable section).

</div>

This will produce the below effect:

It’s important to note that the Modernization page has unique styles applied so the accordion colors and font may appear different on your site.