ExpandableSection

2021-03-09T16:08:09Z

Bartoleo:

{{Studio_Framework_Navigation}}

== Example ==

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

<pre>
<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>
</pre>

In '''<tt>mygame.js</tt>''':

<pre>
define([
ebg/expandablesection
],
...
</pre>

<pre>
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
</pre>

=== 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.

== Helper Code ==

This doesn't appear to be part of the BGA framework, but might make creating the above code easer and more readable.

In '''<tt>mygame_mygame.tpl</tt>''':

<pre>
var jstpl_expandablesection = '\
<div id="${id}">\
<a href="#" id="toggle_${id}" class="expandabletoggle expandablearrow">\
<div class="icon20"></div>\
</a>\
<div id="content_${id}" class="expandablecontent">\
${content}\
</div>\
</div>';
</pre>

In '''<tt>mygame.js</tt>''':

<pre>
placeExpandableSection: function(parent_id, id, content) {
html = this.format_block('jstpl_expandablesection', { id: id, content: content });
dojo.place(html, parent_id);
},
</pre>

Board Game Arena - User contributions [en]

ExpandableSection