Dojo / Dijit Accordion - Add Expand and Collapse Arrows

Question

Trying to figure out how to add the expand / collapse arrow images on Dojo's Accordion dijit.layout.AccordionContainer just like the dijitTitlePane / dojox.widget.TitleGroup has.

Answer 1

Did a bit of research to find out where the TitlePane was getting the arrow images from and found it was a sprite image. I've created some extra code that uses that same sprite image to add the expand and collapse arrows to the AccordionPane. Have to add some extra CSS to the theme in order to make this work:

Add the following near line 2625 in /themes/THEME_NAME/THEME_NAME.css:

.THEME_NAME  .dijitAccordionArrow {
    background:url("images/spriteArrows.png") no-repeat -14px top;
    width:7px;
    height:8px;
    margin-top:-1px;
}

.THEME_NAME  .dijitAccordionTitleSelected .dijitAccordionArrow {
    background:url("images/spriteArrows.png") no-repeat;
    margin-top:-1px;
}

Replace THEME_NAME with whatever the name of your stock theme (i.e. claro) or the name of your custom theme.