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.<\/p>\n
Follow the steps outlined on the main Accordions<\/a> page to create an accordion.<\/p>\n Copy the css class(es) from this page that you wish to apply.<\/p>\n Add them to the Custom Class<\/strong> field in the accordion settings.<\/p>\n If applying multiple styles, separate the class names with a space<\/strong>.<\/p>\n Example: To apply the Clean Accordion<\/strong> style along with Condensed<\/strong> and Light Blue<\/strong> options, enter the following in the Custom Class field:\u00a0 accordion-clean accordion-condensed accordion-light-blue<\/strong>.<\/p>\n The corresponding shortcode will look like this:<\/p>\n If an accordion has already been added to a page, you can update its styling by modifying the shortcode.<\/p>\n Locate the first line of shortcode<\/strong> for the existing accordion. It will look something like this:<\/p>\n Replace yourcustomclass<\/strong> with the desired styles. For example:<\/p>\n <\/p>\n Default Accordion Options<\/a>\u00a0 Clean Accordion<\/a>\u00a0 Accordion - Icon Left<\/a>\n <\/p>\n This is the default accordion without any styles applied.<\/p>\n[toggles class=\"accordion-clean accordion-condensed accordion-light-blue\" header_type=\"h2\" ]...[\/toggles]<\/code><\/p>\nAdd Styles to an Existing Accordion<\/h3>\n
[toggles class=\"yourcustomclass\" header_type=\"h2\" ]...[\/toggles]<\/code><\/p>\n[toggles class=\"accordion-clean accordion-condensed accordion-light-blue\" header_type=\"h2\" ]...[\/toggles]<\/code><\/p>\nJump to the Different Accordion Styles<\/h2>\n
<\/a>Default Accordion Styles<\/h2>\n
Default Accordion<\/h3>\n
\n\n