Convert dijit.TitlePane to dijit.form.ToggleButton

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?

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>

Answer 1

May your question belongs better to stackoverflow.com than to the GIS community.

Btw: if you post some of CSS you created otherwise no one will find a mistake. How do you create the panes in HTML or JavaScript? Which version of Dojo are you using?

EDIT:

I just tried something like this:

<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: '<img src=\'images/bullet.png\'>I\'m a TitlePane Too'">
    Click arrow to close me.
</div>

And it worked pretty good. But I don't know if that would be the result you were looking for. But you can give it a try.

Btw: I was using dojo 1.8.0 but I recognized that you are using a different dojo version. Anyway the solution should work in a same way.

Answer 2

I wound up using dojo.fx.toggler to build a function in the javascript and then update the html to create the button.

function basicToggle() {
toggler = new dojo.fx.Toggler({
    node: "basemap",
    showFunc : dojo.fx.wipeIn,
    hideFunc : dojo.fx.wipeOut
})

} dojo.addOnLoad(basicToggle);

and

<button dojoType="dijit.form.Button">    
<img src="basemap.png" />     
<script type="dojo/method" event="onClick">   
    toggler[(dojo.style("basemap","display") == "none") ? 'show':'hide']();
</script>