Question

I am using docs.jquery.com/UI/Accordion and works well however I can’t seem to figure out how to add an icon to the headers of the accordion.

I only need to add the icon and I don’t want to style the entire accordion. Anyone knows how? Thanks.

Answer 1

You can just add it into your html inside the H3 tag as an image or as the background of a span tag maybe.

Alternatively you could add it as a background to the H3 tag via your stylesheet.

That’s probably the two simplest options.

#accordion h3 {
    background: // image path etc here
}

WHen an H3 is open (i.e. it’s the active H3) it gets a different class so you can use that to display a different icon.

#accordion h3.ui-state-active {
    background: // different image path here
}