Convert dijit.TitlePane to drop down button

Question

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?

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>

The header has a gray rectangular box that I would like to be an image, where you click on the image and it opens up the content located within the button.

EDIT The end goal is for the buttons to have a similar look and feel to those in the header at: http://localgovtemplates2.esri.com/ParkFinder/default.htm

Answer 1

I wound up finding some help via old posts that reference fx.toggler. Worked like a charm. Now its just about styling it the way I want, but the basic functionality is there.