Styles and appearance

20 Feb 20173 minutes to read

Styles and appearance of Accordion work based on CSS class. You need a style sheet to apply styles to Accordion control, that is, ej.mobile.all.min.css

Customize styles

In some scenarios, you may want to change color or design of Accordion control’s appearance. Then, you can override default styles of Accordion control by using its class names. The following are specific class names you can use to modify styles and appearance in Accordion.

Class names

Class	Description
e-m-acc	This is the root class of Accordion control.
e-m-acc-img	This class is applied to the element that holds header icon.
e-m-acc-content	This class is applied for content of Accordion.
e-m-acc-header	This class is applied to the Accordion header element.
e-m-acc -link	This class is applied to an element, which is rendered to provide label for Accordion header.
e-m-acc-border-top	This class is applied to the first element of Accordion item.
e-m-acc-border-bottom	This class is applied to the last element of Accordion item.
e-m-acc-linkhref	This class is applied to the anchor elements of all Accordion items.
e-m-acc-image	This class is applied to an element of Accordion icons.
e-m-acc-logourl	This class is applied to an element of Accordion logourl.
e-m-acc-state-active	This class is applied to the element of Accordion items that is in active state.
e-m-acc-state-default	This class is applied to the element of Accordion items that are in default state.
e-m-acc-content-border-bottom	This class is applied to the last content element of Accordion.
e-m-acc-state-disabled	This class is applied to the elements of Accordion items that are disabled.
e-m-ios7	This class is applied to the root Accordion element in ios7 rendermode.
e-m-windows	This class is applied to the root Accordion element in windows rendermode.
e-m-android	This class is applied to the root Accordion element in android rendermode.
e-m-flat	This class is applied to the root Accordion element in flat rendermode.
e-m-light	This class is applied to the root Accordion element in light theme.
e-m-dark	This class is applied to the root Accordion element in dark theme.