Alternate Accordion Styles

You can customize the look and feel of accordions by applying additional styles using CSS classes. In some cases, you may wish to apply multiple styles. The examples on this page illustrate which classes or combination of classes are possible.

How To Apply Styles

When Creating a New Accordion

Follow the steps outlined on the main Accordions page to create an accordion.

Copy the css class(es) from this page that you wish to apply.

Add them to the Custom Class field in the accordion settings.

If applying multiple styles, separate the class names with a space.

Example: To apply the Clean Accordion style along with Condensed and Light Blue options, enter the following in the Custom Class field: accordion-clean accordion-condensed accordion-light-blue.

The corresponding shortcode will look like this:

[toggles class="accordion-clean accordion-condensed accordion-light-blue" header_type="h2" ]...[/toggles]

Add Styles to an Existing Accordion

If an accordion has already been added to a page, you can update its styling by modifying the shortcode.

Locate the first line of shortcode for the existing accordion. It will look something like this:

[toggles class="yourcustomclass" header_type="h2" ]...[/toggles]

Replace yourcustomclass with the desired styles. For example:

[toggles class="accordion-clean accordion-condensed accordion-light-blue" header_type="h2" ]...[/toggles]

Jump to the Different Accordion Styles

Default Accordion Options Clean Accordion Accordion - Icon Left

Default Accordion Styles

Default Accordion

This is the default accordion without any styles applied.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas porta mi, vitae tincidunt lacus dignissim at. Maecenas nec arcu sem. Donec augue leo, semper id faucibus in, varius sed dolor. Morbi egestas urna sit amet feugiat efficitur.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

accordion-condensed

The line-height and padding is condensed.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-condensed" header_type="h4" ]...[/toggles]

accordion-centered

Centers just the Headings.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-centered" header_type="h4" ]...[/toggles]

accordion-centered-x2

Centers the Headings and Body content.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-centered-x2" header_type="h4" ]...[/toggles]

accordion-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-blue" header_type="h4" ]...[/toggles]

accordion-lt-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-lt-blue" header_type="h4" ]...[/toggles]

accordion-dark-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-dark-blue" header_type="h4" ]...[/toggles]

The condensed, centered and color options can be interchangeably combined.

accordion-lt-blue & accordion-condensed

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-lt-blue accordion-condensed" header_type="h4" ]...[/toggles]

accordion-blue and accordion-centered

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-blue accordion-centered" header_type="h4" ]...[/toggles]

accordion-blue, accordion-condensed & accordion-centered-x2

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-blue accordion-condensed accordion-centered-x2" header_type="h4" ]...[/toggles]

accordion-dark-blue & accordion-centered-x2

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-dark-blue accordion-centered-x2" header_type="h4" ]...[/toggles]

Clean Accordion

accordion-clean

This is the base clean accordion style.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean" header_type="h4" ]...[/toggles]

accordion-clean & accordion-blue

Changes the background color to medium blue.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-blue" header_type="h4" ]...[/toggles]

accordion-clean & accordion-light-blue

Changes the background color to light blue.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-light-blue" header_type="h4" ]...[/toggles]

accordion-clean & .accordion-white

Changes the background color to white.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-white" header_type="h4" ]...[/toggles]

accordion-clean & accordion-dark-blue

Changes the background color to dark blue.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-dark-blue" header_type="h4" ]...[/toggles]

accordion-clean & accordion-condensed

The line-height and padding is condensed.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-condensed" header_type="h4" ]...[/toggles]

accordion-clean & accordion-centered

Centers just the Headings.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-centered" header_type="h4" ]...[/toggles]

accordion-clean & accordion-centered-x2

Centers the Headings and Body content.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-centered-x2" header_type="h4" ]...[/toggles]

The condensed, centered and color options can be interchangeably combined with the clean accordion.

accordion-clean accordion-light-blue & accordion-centered

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-light-blue accordion-centered" header_type="h4" ]...[/toggles]

accordion-clean accordion-white, accordion-condensed & accordion-centered

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-white accordion-condensed accordion-centered" header_type="h4" ]...[/toggles]

accordion-clean accordion-blue & accordion-centered-x2

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-blue accordion-centered-x2" header_type="h4" ]...[/toggles]

accordion-clean accordion-dark-blue, accordion-condensed & accordion-centered-x2

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-clean accordion-dark-blue accordion-condensed accordion-centered-x2" header_type="h4" ]...[/toggles]

Accordion With Icons on the Left

accordion-icon-left

This is the base style for the accordion with the icons on the left.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-solid

This adds a solid line between the accordion toggles.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-solid" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-dashed

This adds a dashed line between the accordion toggles.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-dashed" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-condensed

The line-height and padding is condensed.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-condensed" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-circle

This replaces the square icon with a circular one.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-circle" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-dark-blue

Changes the icon background color to dark blue.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-dark-blue" header_type="h4" ]...[/toggles]

accordion-icon-left & accordion-light-blue

Changes the icon background color to light blue.

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-light-blue" header_type="h4" ]...[/toggles]

The icon shape, lines styles and color options can be interchangeably combined with the icon left accordion.

accordion-icon-left, accordion-dashed & accordion-dark-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-dashed accordion-dark-blue" header_type="h4" ]...[/toggles]

accordion-icon-left, accordion-dashed & accordion-light-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-dashed accordion-light-blue" header_type="h4" ]...[/toggles]

accordion-icon-left, accordion-circle, accordion-dashed, accordion-dark-blue & accordion-condensed

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-circle accordion-dashed accordion-condensed accordion-dark-blue" header_type="h4" ]...[/toggles]

accordion-icon-left, accordion-circle & accordion-solid

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-circle accordion-solid" header_type="h4" ]...[/toggles]

accordion-icon-left, accordion-circle, accordion-solid & accordion-dark-blue

Toggle 2 Content Goes Here.

Toggle 3 Content Goes Here.

[toggles class="accordion-icon-left accordion-circle accordion-solid accordion-dark-blue" header_type="h4" ]...[/toggles]

Alternate Accordion Styles

How To Apply Styles

When Creating a New Accordion

Add Styles to an Existing Accordion

Jump to the Different Accordion Styles

Default Accordion Styles

Default Accordion

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-condensed

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-centered

Toggle number 1 with a longer title that wraps to two lines. blah

Toggle number 2

Toggle number 3

accordion-centered-x2

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-lt-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-dark-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-lt-blue & accordion-condensed

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-blue and accordion-centered

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-blue, accordion-condensed & accordion-centered-x2

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-dark-blue & accordion-centered-x2

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

Clean Accordion

accordion-clean

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & accordion-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & accordion-light-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & .accordion-white

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & accordion-dark-blue

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & accordion-condensed

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3. Hello World.

accordion-clean & accordion-centered

Toggle number 1 with a longer title that wraps to two lines.

Toggle number 2

Toggle number 3

accordion-clean & accordion-centered-x2