com.woltlab.wcf/templates/spoilerBBCodeTag.tpl

   1 <!-- begin:parser_nonessential -->
   2 <div class="spoilerBox jsSpoilerBox">
   3         <header class="jsOnly">
   4                 <a class="button small jsSpoilerToggle"{if $buttonTitle} data-has-custom-label="true"{/if}>{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
   5         </header>
   6
   7         <div style="display: none">
   8                 {@$content}
   9         </div>
  10 </div>
  11
  12 {if !$__wcfSpoilerBBCodeJavaScript|isset}
  13         {assign var='__wcfSpoilerBBCodeJavaScript' value=true}
  14         <script data-relocate="true">
  15                 elBySelAll('.jsSpoilerBox', null, function(spoilerBox) {
  16                         spoilerBox.classList.remove('jsSpoilerBox');
  17
  18                         var toggleButton = elBySel('.jsSpoilerToggle', spoilerBox);
  19                         var container = toggleButton.parentNode.nextElementSibling;
  20
  21                         toggleButton.addEventListener(WCF_CLICK_EVENT, function(event) {
  22                                 event.preventDefault();
  23
  24                                 toggleButton.classList.toggle('active');
  25                                 window[(toggleButton.classList.contains('active') ? 'elShow' : 'elHide')](container);
  26
  27                                 if (!elDataBool(toggleButton, 'has-custom-label')) {
  28                                         toggleButton.textContent = (toggleButton.classList.contains('active')) ? '{lang}wcf.bbcode.spoiler.hide{/lang}' : '{lang}wcf.bbcode.spoiler.show{/lang}';
  29                                 }
  30                         });
  31                 });
  32         </script>
  33 {/if}
  34 <!-- end:parser_nonessential -->