Spoiler button to show/hide large amounts of text
Normally when working with source code you can create a link class and create a button that hides a large amount of text (like a proper spoiler, not black it out) so it doesn't have to take up so much space when skimming through the post (and it makes you able to hide large pictures unless people actually wants to view them).
-
clicker cookie commented
A good article, a good book can change the fate of so many people. Thanks for the valuable sharing, please keep it up to date and I will always follow you.
https://play-solitaire.co/ -
GTech_1 commented
This may help define this feature.
Here is a custom styled, working spoiler button that I have added to my V4 site.
Add this code to the Custom CSS of your V4 site---Custom CSS Code starts here---
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ccd6f0;
-webkit-box-shadow:inset 0px 1px 0px 0px #ccd6f0;
box-shadow:inset 0px 1px 0px 0px #ccd6f0;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba0a8), color-stop(1, #697380));
background:-moz-linear-gradient(top, #9ba0a8 5%, #697380 100%);
background:-webkit-linear-gradient(top, #9ba0a8 5%, #697380 100%);
background:-o-linear-gradient(top, #9ba0a8 5%, #697380 100%);
background:-ms-linear-gradient(top, #9ba0a8 5%, #697380 100%);
background:linear-gradient(to bottom, #9ba0a8 5%, #697380 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba0a8', endColorstr='#697380',GradientType=0);
background-color:#9ba0a8;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #5c5e61;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:13px;
padding:4px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #2d323d;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #697380), color-stop(1, #9ba0a8));
background:-moz-linear-gradient(top, #697380 5%, #9ba0a8 100%);
background:-webkit-linear-gradient(top, #697380 5%, #9ba0a8 100%);
background:-o-linear-gradient(top, #697380 5%, #9ba0a8 100%);
background:-ms-linear-gradient(top, #697380 5%, #9ba0a8 100%);
background:linear-gradient(to bottom, #697380 5%, #9ba0a8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#697380', endColorstr='#9ba0a8',GradientType=0);
background-color:#697380;
}
.myButton:active {
position:relative;
top:1px;
}---Custom CSS Code ends here---
Use: After adding the code above to your custom CSS, add, and define the button in an HTML widget, with the HTML Source Editor provided by gamerlaunch / guildlaunch.
To do this, add the following code in the location you wish to display the button. Change the 'your div id here' entries to the name of the div id for the spoiler you wish to open, and change the entry for Your Button Title Here to the text you wish to display on the button.
---HTML Spoiler Button Code starts here---
<div style="text-align: left;"><a class="myButton" title="Click to show/hide content" onclick="if(document.getElementById('your div id here') .style.display=='none') {document.getElementById('your div id here') .style.display=''}else{document.getElementById('your div id here') .style.display='none'}" type="button"><span style="color: #ffffff;">Your Button Title Here</span></a></div>---HTML Spoiler Button Code ends here---
Add a defined <div> tag, with a matching id, under the button code (this is the text that will be hidden by the spoiler). The entry for "your div id here" must match the entries entered in the button code above. Also note the difference in the two types of quote marks between the two bits of code. These are important. Single quotes above, double quotes below.
---Code starts here---
<div id="your div id here" style="display: none; text-align: left;">
<p>This is hidden spoiler text.</p>
</div>---Code ends here---
I hope this code actually shows properly here, and I hope this helps.
If you'd like to see how they can be used on a V4 site, here is a link to the Guild Rules custom page on my V4 site.
http://unlimited.gamerlaunch.com/custom.php?page_id=112207&gid=418684
Note: On my V5 testing site, I could no longer get these buttons to work. V5 does not have the same kind of Custom Page support, and the Custom CSS feature *may* be disabled, since I only maintain a subscription for our live site, and not the test site. I only use it to test changes before I deploy them to our live site.
-
AdminGL_Stephen (Admin, Gamer Launch) commented
We could look into adding a max height to the spoiler maybe. Let me look into how this might be handled.