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>

2 Answers 2


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?


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.

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.

  • How do I move this to stackoverflow without crossposting?
    – Craig
    Sep 17, 2012 at 17:33
  • I guess you did it the right way. I think only moderators or somebody with high reputation can vote to move questions.
    – mistapink
    Sep 18, 2012 at 6:44
  • Thanks for the effort. This isn't what I'm looking for but I appreciate the help.
    – Craig
    Sep 18, 2012 at 14:07

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);


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.