How can I remove the css classes from a richfaces component?

Question

I'm using a rich:simpleTogglePanel and it puts these 3 css classes on the divs:

rich-stglpanel
rich-stglpanel-header
rich-stglpnl-marker
rich-stglpanel-body

Is there any way that I can remove those classes?

Answer 1

Every Richfaces component comes with a set of CSS classes. These CSS classes are used to customize the aspect of your toggle panel (or any other RF component). The four CSS classes, as explained in the component guide, are indeed attached to the HTML components generated by the RF framework.

There are 2 solutions for you:

1. Customize your CSS in order to extend the default properties of the four CSS classes. This way, you will have the rendering you want for this component.
2. Remove the CSS classes using JavaScript (not recommanded).

The second solution can be achieved easily with some jQuery script:

jQuery(document).ready(function() {
    jQuery(".rich-stglpanel").removeClass("rich-stglpanel");
    ...
});

(this means once the page is loaded, find all elements with CSS class rich-stglpanel and remove this class).