Template:CollapseItem

<pre class="script">
//&nbsp;CollapseItem template, by neilw, 2009
// Versions
//&nbsp;&nbsp;&nbsp;&nbsp;1.01&nbsp;&nbsp;&nbsp;&nbsp;09/08/09&nbsp;&nbsp;&nbsp;&nbsp;neilw&nbsp;&nbsp;&nbsp;&nbsp;Fixed occasion when inadvertent error alert is generated
//&nbsp;&nbsp;&nbsp;&nbsp;1.00&nbsp;&nbsp;&nbsp; 07/20/09&nbsp;&nbsp;&nbsp; neilw&nbsp;&nbsp;&nbsp; First release

//NOTE:&nbsp;This template requires the file &quot;collapse_icons.gif&quot; to be installed in the location
// specified below
var icons_uri = &quot;http://developer.mindtouch.com/@api/...icons.gif&quot;;
//&nbsp;USAGE: template.collapsibleItem(item, show, hide, effect)
//&nbsp;&nbsp;&nbsp; &quot;item&quot;: if specified, then insert this list xml.  Doesn't matter if the list is wrapped
//        inside other elements.  Otherwise, find the next &lt;UL&gt; on the page just after the template
//        call.
//    &quot;show&quot;: number of tree levels to collapse (default: 99).  This is to avoid very lengthy
//        processing on very large trees.  However, the processing is on the client side, so it
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; won't bog down the wiki server either way.
//&nbsp;&nbsp;&nbsp; &quot;hide&quot;: if true, use &quot;slide&quot; effect to show/hide subtrees (default: false)
//&nbsp;&nbsp;&nbsp; &quot;effect&quot;: Effect used to show/hide items.  Possible values:
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;default&quot;:&nbsp;appear/disappear.  Also used if &quot;effect&quot; is not specified.
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;slide&quot;: slide up/slide down.
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;fade&quot;: fade in/fade out

// Args
var item = $0 ??&nbsp;$item;
var show = $1 ??&nbsp;$show;
var hide = $2 ?? $hide ?? show;
var effect = string.tolower($3 ??&nbsp;$effect ?? 'default');

// post-process args
var error_msg = &quot;&quot;;
if (!list.contains(['default', 'slide', 'fade'], effect)) {
&nbsp;&nbsp;&nbsp; let error_msg = &quot;ERROR: collapseItem: invalid effect '&quot; .. effect .. &quot;'&quot; ..
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot; (allowable values are 'slide', 'fade', and 'default')&quot;;
&nbsp;&nbsp;&nbsp; let effect = 'default';
}

var id = @id;
var icon = (show == nil);
var item_type = typeof(item);
var item_xml = (item_type == &quot;xml&quot; ?&nbsp;item : nil);
var item_id  = (item_type == &quot;str&quot;&nbsp;?&nbsp;item&nbsp;: nil);

// Output HTML
&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;&quot;
&nbsp; DekiWiki.$(document).ready(function($) {
&nbsp;&nbsp;&nbsp; collapseItem_showhide($,&quot;..json.emit(id)..&quot;,&quot;..json.emit(item_type)..&quot;,&quot;..json.emit(item_id)..&quot;,&quot;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ..json.emit(show)..&quot;,&quot;..json.emit(hide)..&quot;,&quot;..json.emit(effect)..&quot;);
  });
&quot;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;&quot;
  function collapseItem_showhide($, id, item_type, divid, show, hide, effect) {
&nbsp;&nbsp;&nbsp;&nbsp;var collapseIcon_hide = '0px -64px';
&nbsp;&nbsp;&nbsp;&nbsp;var collapseIcon_show = '0px -80px';
&nbsp;&nbsp;&nbsp; var icon = (show == null);
  // Find and initialize show/hide link
&nbsp;&nbsp;&nbsp;&nbsp;var $a = $('a#'+id);
&nbsp;&nbsp;&nbsp;&nbsp;if ($a.length == 0) return;&nbsp;&nbsp;&nbsp;&nbsp;// Don't ask :-o
&nbsp;&nbsp;&nbsp; $a.html(icon&nbsp;?
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&lt;img src=\&quot;/skins/common/icons/icon-trans.gif\&quot; ' +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'style=\&quot;background-image:url(\\\'&quot;.. icons_uri .. &quot;\\\'); ' +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'background-position:' + collapseIcon_show + '\&quot; /&gt; ' :
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; show);
  // Find the div
&nbsp;&nbsp;&nbsp;&nbsp;var $div = (divid ?&nbsp;$('#'+divid) : ($a.next().length ?&nbsp;$a.next() : $a.parent().next()));
&nbsp;&nbsp;&nbsp;&nbsp;if (! $div.length) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('ERROR: collapseItem(): can\\\'t find the element');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp; $div.hide();
&nbsp;// Bind to click of the link
&nbsp;&nbsp;&nbsp;&nbsp;$a.click(function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($div.css('display') == 'none') { // Show!
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if      (effect == 'slide') $div.slideDown('fast');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (effect == 'fade')  $div.fadeIn('fast');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else $div.show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (icon) $a.find('img').css('background-position', collapseIcon_hide);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else      $(this).html(hide);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else { // Hide!
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if      (effect == 'slide') $div.slideUp('fast');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (effect == 'fade')  $div.fadeOut('fast');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else $div.hide();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (icon)    $a.find('img').css('background-position', collapseIcon_show);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else         $(this).html(show);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(false);
&nbsp;&nbsp;&nbsp;&nbsp;});
  }
&quot;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  if (error_msg != &quot;&quot;) &lt;p style=&quot;color:red; font-weight:bold;&quot;&gt;error_msg&lt;/p&gt;;  // error message
  &lt;a href=&quot;#&quot; id=&quot;{{id}}&quot;&gt;&quot;&nbsp;&quot;&lt;/a&gt;;
  if (item_xml)
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style=&quot;display:none&quot;&gt;item&lt;/div&gt;;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>&nbsp;</p>