<!-- begin:parser_nonessential -->
-<div class="container containerPadding spoilerBox jsSpoilerBox">
+<div class="spoilerBox jsSpoilerBox">
<header class="jsOnly">
- <a class="button jsSpoilerToggle">{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
+ <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>
</header>
<div style="display: none">
</div>
</div>
-<script data-relocate="true">
- //<![CDATA[
- $(function() {
- var $spoilerBox = $('.jsSpoilerBox').removeClass('jsSpoilerBox');
- $spoilerBox.find('> header > .jsSpoilerToggle').click(function() {
- var $spoilerToggle = $(this);
- $spoilerToggle.toggleClass('active').parent().next().slideToggle({
- complete: function() {
- if ($(this).is(':visible')) {
- WCF.DOMNodeInsertedHandler.execute();
- }
-
- {if !$buttonTitle}
- if ($(this).is(':visible')) {
- $spoilerToggle.text('{lang}wcf.bbcode.spoiler.hide{/lang}');
- }
- else {
- $spoilerToggle.text('{lang}wcf.bbcode.spoiler.show{/lang}');
- }
- {/if}
+{if !$__wcfSpoilerBBCodeJavaScript|isset}
+ {assign var='__wcfSpoilerBBCodeJavaScript' value=true}
+ <script data-relocate="true">
+ elBySelAll('.jsSpoilerBox', null, function(spoilerBox) {
+ spoilerBox.classList.remove('jsSpoilerBox');
+
+ var toggleButton = elBySel('.jsSpoilerToggle', spoilerBox);
+ var container = toggleButton.parentNode.nextElementSibling;
+
+ toggleButton.addEventListener(WCF_CLICK_EVENT, function(event) {
+ event.preventDefault();
+
+ toggleButton.classList.toggle('active');
+ window[(toggleButton.classList.contains('active') ? 'elShow' : 'elHide')](container);
+
+ if (!elDataBool(toggleButton, 'has-custom-label')) {
+ toggleButton.textContent = (toggleButton.classList.contains('active')) ? '{lang}wcf.bbcode.spoiler.hide{/lang}' : '{lang}wcf.bbcode.spoiler.show{/lang}';
}
});
});
- });
- //]]>
-</script>
+ </script>
+{/if}
<!-- end:parser_nonessential -->