How can we improve our V5 options?

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).

33 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Anonymous shared this idea  ·   ·  Admin →

    2 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • GTech_1GTech_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.

      Feedback and Knowledge Base