This is a documentation for Board Game Arena: play board games online !

ExpandableSection

From Board Game Arena
Revision as of 05:50, 19 January 2021 by V k k (talk | contribs)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.