How to Use Accordions

If accordions are set up on your website, there should be an icon in your toolbar. Click on the accordion icon to enter the information for all the accordions at one time.


A popup window will open and you can enter your title and content for each accordion. Click the Add Another Accordion button to add another and keep doing so until you are finished. Click submit.

accoridion submit

A shortcode for the accordion will be added to your text editor. All of the accordions will be wrapped within a [accoridion-wrap]….[/accordion-wrap]code.

accoridion page

The accordions will appear on your page in the format that was styled to match your website. If you need to change the styling for your accordions, contact your Account Director.

accordions on page

Edit Content Within An Accordion

To edit the content of the accordion do so within the content area of the shortcode. You can add returns to make it easier for you to read where the content is to go but be aware that it will add space between your accordions on the page/post if you do not keep the end of one accordion code right next to the start of another accordion code. As long as you do not alter any of the code, you can change the content area within the editor to flow the way you want it to on the page.

accordion content

When the accordions are opened on the page or post, the content area will appear as it does in the editor. However, notice that there has been more space added between the accordions than when the code remained next to each other. Be sure to keep the spacing consistent throughout your site.

accordions open

Edit Headline Within An Accordion

To edit a title of an accordion, only change the content within the parenthesis.

accordion-edit title

A note about accordions and SEO

Accordions are great for helping to organize your content and shorten pages. It is a good idea, though, to think about the content that is going on your page and what is most important. Google indexes the content within accordions, but it ranks it lower. Make sure that you have highly valuable content outside of the accordions. This may take a little time to think about and plan out, but it is important. Below are some tips that can help you decide if you should use them or not.

Tips on how and when to use accordions:

  • If you have a page worth of content inside an accordion, it may be better for that information to be on it’s own page. One or two small paragraphs is a good rule of thumb to follow.
  • If your page only has one accordion, it may be best to have a bit longer of a page. One accordion reduces usability from a viewer’s perspective.
  • On the opposite side of too few accordions, an overabundance can also reduce usability. Generally 3-5 accordions is plenty for a page.
  • Use accordions when it is okay for viewer’s to pick and choose which content they’d like to read. Your important calls-to-action should be outside of accordions and in the main content. Hiding these makes your viewer’s hunt for them. This can cause them to not see your calls-to-action at all.