MyBB Community Forums

I've been searching for hours for a good spoiler plugin, but all I could find are some lame MyCode spoilers and other outdated color-change-on-click spoiler plugins. Coming from PhpBB, I would love it if someone could make us a proper spoiler plugin that looks like this:



Basically, the functionality should be the same as when you show/hide a forum on MyBB:




Please, if you got the skills, make our MyBB boards have this awesome feature!

Not sure if this is any addition to you: http://www.mybbextras.com/showthread.php...SS+spoiler

Its not a plugin but its a little different.

Much better than others I saw, but too extravagant. I might be able to customize it... I'll post here with a new code soon.

---

Ok, I've managed to get the look I was looking for :

Quote:<div align="left">
<div style="margin: 5px 20px 20px; width: 80%;">
<div style="text-align: left; padding: 2px; repeat-x scroll 0% 0% transparent;color:#000000; #4B7926; font-weight:none; "><input type="button" 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.innerText = ''; this.value = '-'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '+'; }" style="width: 20px; font-size: 10px; margin: 0px; padding: 0px;" value="+"> Spoiler:</div><div class="quotecontent"><div style="border: 1px solid #cecece; border-width: 1px 1px 1px; border-color: #cecece; padding: 1px; -moz-border-radius:0px; display: none; background: #ffffff;">$1</div></div></div></div>

Still not perfect though. I would love to replace the button with pictures for +/- and would like to see a blank box before clicking the + button just like here:

You have to manually edit "editor.js" to make them appear.

Thanks for replying, but can you be more specific?

(2010-09-22, 11:44 PM)wigiman Wrote: [ -> ]Thanks for replying, but can you be more specific?

Really i don't know. A proper tutorial has never been made, and core edits aren't recommended as they have to be updated constantly.

(2010-09-22, 11:51 PM)Mark.M Wrote: [ -> ]

(2010-09-22, 11:44 PM)wigiman Wrote: [ -> ]Thanks for replying, but can you be more specific?

Really i don't know. A proper tutorial has never been made, and core edits aren't recommended as they have to be updated constantly.

Not if it was made in an external .js file.

There has to be a simple way just to add that line...

Try this MyCode:

<div align="left">
	<div style="margin: 5px 20px 20px; width: 80%;">
		<div style="text-align: left; padding: 2px; repeat-x scroll 0% 0% transparent;color:#000000; #4B7926; font-weight:none; ">
			<a href="#" 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 = '<img src=images/collapse.gif alt=[-] />'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';	this.innerHTML = '<img src=images/collapse_collapsed.gif alt=[+] />'; }; return false;"><img src="images/collapse_collapsed.gif" alt="[+]" /></a>Spoiler:
		</div>
		<div style="border: 1px solid #cecece; border-width: 1px 1px 1px; border-color: #cecece; padding: 1px; -moz-border-radius:0px; background: #ffffff;">
			<div style=" padding: 1px; display: none; background: #ffffff;">
				$1
			</div>
		</div>
	</div>
</div>

It may not work in the admin cp MyCode Test area but test it in a post. Also, you may have to adjust the image location if yours are not in the default location

Well done man! Does EXACTLY what I wanted! Thanks a lot!
Is there any way to add border=0 somehow so when you click the gif buttons it wont put an outline around them?