MyBB Community Forums

Full Version: Spoiler (hide\show) by MyCode
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Trying to create spoiler option in posts by old good recipe.

regexp:
\[spoiler\](.*?)\[/spoiler\]

replacement:
<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em; width: 100%;" ><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Spoiler </b><a href=\'#\' onClick=\'return false;\'>Hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler </b><a href=\'#\' onClick=\'return false;\'>Show</a>'; }" /><b>Spoiler </b><a href="#" onClick="return false;">Show</a></span> </div><div class="quotecontent"><div style="display: none;">$1</div></div></div>

It works pretty well in the testbox of visual MyCode editor on admin CP but doesn't work in real posts. The text into the spoiler tag just invisible and nothing shows like the post is absolutely empty. Maybe anyone tryied this and knows how to adjust it?

Or maybe there are some other ways to put spoiler option in the latest version of myBB.
I just use the html 'summary' tag as a replacement. Works well and looks good (I even styled the cursor to look like a 'forbidden' sign but it could be any cursor property and you could add any other styling you want)

It just looks like this closed:

[attachment=46261]

and open:

[attachment=46262]

This is all I use as a replacement:

<style>.not-allowed {cursor: not-allowed;}</style>
<details>
  <summary class="not-allowed"><b>Spoiler</b></summary>
  <p>$1</p>
</details>

HTML Summary:
https://www.w3schools.com/tags/tag_summary.asp

CSS cursor Property:
https://www.w3schools.com/cssref/pr_class_cursor.php
(2023-08-22, 11:23 AM)lost puppy Wrote: [ -> ]I just use the html 'summary' tag as a replacement. Works well and looks good (I even styled the cursor to look like a 'forbidden' sign but it could be any cursor property and you could add any other styling you want)

Thank you, I will try this way. I think that maybe there is restriction on using JS commands in MyCode in the modern version of MyBB (while it still works in the testbox section of MyCode editor).