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

ExpandableSection: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(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...")
 
mNo edit summary
Line 1: Line 1:
== Example ==
== Example ==


In <tt>mygame_mygame.tpl</tt> (the border not required):
In <tt>mygame_mygame.tpl</tt> (the border is not required):


<pre>
<pre>

Revision as of 05:50, 19 January 2021

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.