Accordions

Use Accordions to condense or hide content until needed. They can allow you to let your visitors know what information is available on the page without having to scroll. The following is an example Accordion:

This is your Accordion Title

Accordion 0

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Accordion 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam colaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to Implement:

Accordions may not display properly on your site if you have 'TheThe Slider' or 'TheThe Tabs and Accordions' plugins enabled.
  1. Log into WordPress
  2. Click on Plugins
  3. Search for 'Squelch Tabs and Accordions Shortcodes' and activate
  4. Click on Appearance > Tabs and Accordions
  5. In the dropdown list, select 'No JQuery UI Theme' at the top of the list and Save Changes
  6. Select the page you’d like to add an Accordion to
  7. Use the Text view to edit your content
  8. In the spot where you’d like to add your Accordion, use the following code (with your text replacing the Latin):
[accordions title="Accordion 0" active=2 event="click" disabled=false autoheight=true]
[accordion title="Accordion 0"]Lorem ipsum dolor sit amet.[/accordion]
[accordion title="Accordion 1"]Lorem ipsum dolor sit amet.[/accordion]
[accordion title="Accordion 2"]Lorem ipsum dolor sit amet.[/accordion]
[accordion title="Accordion 3"]Lorem ipsum dolor sit amet.[/accordion] 
[/accordions]
Set 'autoheight' to false to ensure the height of the accordion expands to fit the content; 'active=' indicates which section is expanded when the page loads -- the first section is '0', the second '1', etc.