How to make jQuery Accordion a bit cleaner?

Question

Using jQuery UI I created an accordion like so:

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

with this html:

<div id="accordion">
    <h5>First header</h5>
    <div class="some_class"></div>
    <h5>Second header</h5>
    <div class="some_other_class"></div>
</div>

which looks like this (excluding the New Ticket button):

I now want the accordion headers to look more like the button: a white background and black text, but I'm kinda lost in where I should edit/add css.

Does anybody know how I can easily change the background and the text color of this accordion? All tips are welcome!

Answer 1

You can always add css styling just for the children of a particular DOM element. eg:

div#accordion h5 {
    ... custom styles ...
}

Demo

This does, however, mean that you must overwrite some/all of the default goodness you get from using jqueryui . If you only want to apply styles to a specific element, right-click->Inspect element to see the exact name of the DOM tag you want to restyle.

UPDATE: Moving the span around is just as easy, see updated fiddle .

Doing just #accordion span { left:0; } #accordion span { left:0; } may be sufficient for your purpose. If not, keep in mind...

DISCLAIMER: I do not recommend doing it as I have in the fiddle. Specifically this line:

background-position: -36px -20px;

is VERY hard to read, and anyone looking at your CSS without being familiar with jQueryUI's styling themes will wonder what you did. A better solution would be to outright replace the background-image in your span s with a custom one, or or even get rid of them with display:none; and put in your own customised icons.