jQuery UI: Simplified Accordion

Maybe you're using the jQuery UI accordion widget, and you don't necessarily like the way it looks by default. Maybe this isn't a tunable theme setting that the theme roller can fix either. I know I've been faced with this situation before, I just want the widget simplified, right down to the bare essentials. There is a quick hack we can use to achieve this with the accordion if all you're looking for is a visual simplification.

First, here is what the simplified accordion looks like using the Redmond theme.

I'm using the following Javascript code to create the widget.

$(function() {

    // Use custom section icons, and collapse all sections
    // by default.
    $( "#accordion" ).accordion({
        icons: {
            header: "ui-icon-circle-plus",
            activeHeader: "ui-icon-circle-minus"
        },
        collapsible: true,
        active: false
    });

});

And here is the CSS used to hide the parts of the accordion I don't care about. Be sure to include it after including your theme so you can override it.

/* 
 * Get rid of the accordion header border and background.
 * Also make the font a little bigger so it stands out.
 *
 */
.ui-accordion .ui-accordion-header {
    border: none;
    background: none;
    font-size: 1.1em;
}

/*
 * Fix the icon position, it looks a little off with the
 * default value of 50%.
 *
 */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    top: 48%;
}

/*
 * Git rid of the accordion section content border and 
 * background.
 *
 */
.ui-accordion .ui-accordion-content {
    border: none;
    background: none;
}