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

ExpandableSection

From Board Game Arena
Revision as of 05:49, 19 January 2021 by V k k (talk | contribs) (Created page with "== Example == In <tt>mygame_mygame.tpl</tt> (the border not required): <pre> <div id="my_expandable" style="border: 1px solid black"> <a href="#" id="my_click_to...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Example

In mygame_mygame.tpl (the border 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.