ExpandableSection

Example

In mygame_mygame.tpl (the border is not required):

    <div id="my_expandable" style="border: 1px solid black">
        <a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow">
            <div class="icon20"></div>
        </a>
        <div id="my_hidden_content" class="expandablecontent">
            Here's the hidden content
        </div>
    </div>

In mygame.js:

    define([
        ebg/expandablesection
    ],
    ...

    this.expanded = new ebg.expandablesection();
    this.expanded.create(this, "my_expandable");
    this.expanded.expand();   // show
    this.expanded.collapse(); // hide
    this.expanded.toggle();   // switch show/hide

Notes

• All of the inner parts of the expandable div must have ids so dojo.query can find them.
• The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.