How to create accordions

Accordions are a type of webpage layout that allows you to hide or display large chunks of content behind dropdowns. Accordions work well if you have a page that displays multiple types of content. You could use accordions to help keep the page manageable, and so that people with limited hand mobility don’t have to scroll through a ton of information. (Screen readers have a command to open and close accordions.)

Say you’re creating a page that lists different types of fruits. You want to share information on apples, bananas, and peaches.

Your page could look like:

Different Types of Fruit

Apples

  • Baldwin
  • Braeburn
  • Golden Delicious
  • Honeycrisp
  • Red Delicious
  • Red Prince

 

Bananas

  • Blue Java
  • Cavendish
  • Fehi
  • Goldfinger
  • Gros Michel
  • Ladyfinger
  • Manzano
  • Orinoco
  • Praying Hands

 

Peaches

  • Arctic Supreme
  • Clingstone
  • Donut
  • Freestone
  • Melting Flesh

 

How to add an accordion to a page

In WordPress, you can create an accordion with the following shortcode:

Text: <div class="su-spoiler su-spoiler-style-"fancy" su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>“Accordion</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> The content you want to live in the accordion  </div></div>

To create the Apples accordion, for instance, the code is:

Text: <div class="su-spoiler su-spoiler-style-"fancy" su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>"Apples"</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Baldwin Braeburn Golden Delicious Honeycrisp Red Delicious Red Prince  </div></div>

Give it a try!

Leave a Reply

Your email address will not be published. Required fields are marked *