Spoiler tag without javascript?

[Black Snow]

Try this: http://codepen.io/AngelKrak/pen/FojxE

[OUTL4W]

Originally Posted by Black Snow

Try this: http://codepen.io/AngelKrak/pen/FojxE

its a lil wonky but I did find this...

replacement:

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
{param}
</div></div>

additional.css:

.spoilerbutton {
   display:block;
   margin:5px 0;
}
.spoiler {
   overflow:hidden;
   background: transparent;
}
.spoiler > div {
   -webkit-transition: all 0.75s ease;
   -moz-transition: margin 0.75s ease;
   -o-transition: all 0.75s ease;
   transition: margin 0.75s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
   margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler {
   padding:5px;
}

change the items in red to your preference....

[pjkcards]

Thanks for the replies, but still not working. This is the result of the original, the one Black Snow recommended, and the last one is OutL4w:
http://i.imgur.com/nVkQ2Yv.png

Perhaps the theme is somehow messing with the show/hide. What's the best way to troubleshoot this?

Thanks.

[pjkcards]

Bump. Just got a new mobile theme going and the Show button still does nothing. Anyone have a spoiler working on mobile themes?

Thanks.

[pjkcards]

Still haven't been able to get this to work, see screenshot here:
http://i.imgur.com/nVkQ2Yv.png

Just tried this one too with the same result:
https://vborg.vbsupport.ru/showthread.php?t=289968

Any ideas to get a spolier working on mobile would be appreciated, thanks.

[pjkcards]

Edit: Problem solved. This works on mobile:
https://vborg.vbsupport.ru/showthread.php?t=279069

I modified it a bit for the option tag, and to make all content 80% width. But if you're having issue with the spoiler on mobile, the above will work. Thanks guys, hope that helps.

[akz645]

Originally Posted by pjkcards

Edit: Problem solved. This works on mobile:

Replacement:

<div style="margin: 5px 20px 20px;"> 
<div style="smallfont" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;"> <b>Spoiler:</b>            <spa                                     
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 = '<a href=\'#\' onClick=\'return false;\'>Hide</a>'; } 
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
this.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Show</a>'; }" /><a href="#" onClick="return false;">Show</a></span>
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> 
<div style="display: none;"> 
{param}
</div></div></div>

That one I personally made work.
I had to change a couple of things, until I finally got it to work. I tried to make it resemble the classic spoiler button.

<input type="button"

I think it's the 'button' feature that makes it not work on the mobile skin.
Every single spoiler that I've seen which uses button, doesn't work on the mobile skin.

Originally Posted by pjkcards

Thanks for the replies. For anyone using a spoiler, have you ever had any complaints about people who click and nothing happens? I suspect it is due to their browser not allowing javascript. Is this the case?

The best way to test, is by going to the mobile skin from your PC and then trying yourself.