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