How Do I Change the Style of the Accordion?

Support
#1

Hey I want to change the font and colors and such of the accordion. I’d also like to have all of them defaulted to closed unless clicked but right now the top one is automatically opened.

How do I do these things? Is it code or something within the element?

Thanks!

#2

Hi there,

This is a customization request which is outside of our support scope. We will not be able to do the customization for you but we will do our best to show you how to do so.

Here is a sample page which we used the accordion element:
http://demo.theme.co/integrity-1/shortcodes/accordion/

You need to use the Google Chrome Browser Developer Toolbar to find out the correct selectors for the Accordions:

Then you will need to add your CSS code to the X > Launch > Options > CSS section.

For the heading of the accordion:

.x-accordion-group .x-accordion-heading .x-accordion-toggle {
/*  Your CSS Customization Code Here */
}

For the content of the Accordion:

.x-accordion-group .x-accordion-body .x-accordion-inner {
/*  Your CSS Customization Code Here */
}

The Accordion does not have the option of the all collapsed mode. A workaround is to have a Javascript code which will trigger the click event on opened items. That will not be a perfect solution but can do the trick.

Kindly add the code below to X > Launch > Options > JS:

jQuery('.x-accordion-toggle:not(.collapsed').trigger('click');

Hope it helps.

1 Like
#3

You’re awesome! Thanks!

#4

Glad that we could be of a help :slight_smile: