Quote:
Originally Posted by thisgeek
I've spent quite a bit of time mucking around, and I've come up with the following changes.
I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.
I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.
Code:
<table><tr><td>
<div>
<div style="margin-bottom: 5px;">
<input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>
I've modified this one so that you can use it inline in a paragraph:
Code:
<span>
<span style="margin-bottom: 5px;">
<input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</span>
<span>
<span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>
</span>
</span>
See this post if you want to see a sample of how it looks.
EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.
|
Thanks it works great example:
http://www.twentyfourforum.com/showthread.php?p=21994
also there was no need to change the colours etc.