I have an app that I'm building using the javascript API and have created 3 titlepanes in the header that open up to reveal information (basemap gallery, legend, layers). It functions exactly how I want it to, now I would like to make it "look pretty" by giving each pane its own image, where when you click on the image, it opens the pane in the same way.
I have tried overriding the CSS however, that gives all the titlepanes the same image. It looks as though I'll need to convert the titlepanes to a togglebutton. Reading through some of the samples it looks like I'll need to add additional code beyond the html change. Is there a best way to go about this edit?
EDIT: Here is an example of the html that creates the titlepane the "basemapGallery" div is the information inside the pane that I would like to make a drop down or any other type of button where I can control the image.
<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false" style="float:right; margin-right:10px;">
<div dojoType="dijit.layout.ContentPane" style="width:275px; height:560px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>