Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxExpander.

jqx-widget - applied to the jqxExpander widget.
jqx-expander - applied to the jqxExpander.
jqx-expander-header - applied to the expander's header.
jqx-widget-header - applied to the header elements.
jqx-fill-state-normal - applied to the header element.
jqx-expander-content - applied to the content element.
jqx-widget-content - applied to the content element.
jqx-expander-arrow - applied to the header's expand/collapse button.
jqx-expander-arrow-top - applied to the expander's expand/collapse button and displays arrow icon.
jqx-expander-arrow-bottom - applied to the expander's expand/collapse button and displays arrow icon.
jqx-expander-header-hover - applied to a hovered header element.
jqx-fill-state-hover - applied to a hovered header element.
jqx-fill-state-pressed - applied to an expanded header element.
jqx-fill-state-focus - applied to focused Content or Header element.
jqx-fill-state-disabled - applied to the jqxExpander when it is disabled.

When you create a custom style with colors and backgrounds for jqxExpander, you need to do the following:

Add the above CSS classes related to jqxExpander
After each CSS class, add your theme name.
For example:
jqx-expander-summer

To apply your custom style to jqxExpander, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxExpander
        $("#jqxexpander").jqxExpander({ theme: 'summer', width: 200, height: 100 });
    });
</script>

The sample below demonstrates how to set the 'Summer' theme to jqxExpander.