Spoiler text / Expandable text box

  • Unknown's avatar
    truecrisis · Member ·

    All I wanted was to have a hidden text box that reveals when clicking a button. The use case for this is most often spoiler text for video games or movies.

    Seems this is not possible unless I’m on the business plan??

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mapetrei · Member ·

    Hello @truecrisis !

    From what I understand, what you would need it the use of a plugin that does that. It is true however that you need the Business plan to be able to install plugins.

    You can see the difference between plans here: https://wordpress.com/pricing/

  • staff-brock · Staff ·

    Hey there truecrisis,

    @mihaiapetrei is right, this could be achieved through a plugin for which you would need a paid plan.

    I think I understand your goal here. For example, you’re blogging about Game of Thrones and you want to write about how a major character died, but hide their name until your reader clicks to reveal. You may be able to accomplish this through the post editor in HTML.

    Try pasting this code in the HTML editor of your post:

    ‘<div style=”display: none;” id=”hiddenText”>Your favorite Game of Thrones character has been killed!</div>
    Click here to reveal a spoiler‘

    When you preview the post, you should be able to click the text to reveal the spoiler. Does this help solve for what you’re trying to do?

  • staff-brock · Staff ·

    Apologies, the forum has formatted some of my HTML. Here is the code to paste:

    <div style="display: none;" id="hiddenText">Your favorite Game of Thrones character has been killed!</div>
    <a href="#" onclick="document.getElementById('hiddenText').style.display='block'; return false;">Click here to reveal a spoiler</a>

  • Unknown's avatar
    truecrisis · Member ·

    Hi Donal

    Thanks for trying to help.

    That suggestion you gave is exactly what my OP was trying to address. It utilizes Javascript on the “onclick” HTML section. This is stripped out in the wordpress editor.

    I have found a solution that I’m trying to work with.

    <details>
<summary> Click here to see a spoiler </summary>
Your favorite Game of Thrones character has been killed!
</details>

    <details>
    <summary> Click here to see a spoiler </summary>
    Your favorite Game of Thrones character has been killed!
    </details>

    This is only supported by some browsers, so its not ideal. Also, I have yet to explore if I can change the design.

    Kinda sucks that WordPress doesn’t provide non-business plan users some basic toolsets for common use cases.

  • staff-brock · Staff ·

    That’s strange. So you’re saying the code above did not work on your site?
    When I tested using the WordPress.com post editor, it successfully converted from HTML to the Visual editor and in Preview mode.

    Any more luck? Would love to see if you find a solution or if there’s anything further we can add here in the forums.

  • Unknown's avatar
    justjennifer · Member ·

    This is a case where tagging a thread and searching for previous forum topics can be beneficial.

  • staff-brock · Staff ·

    You’re right, @justjennifer! I really appreciate the suggestion.

    @truecrisis You can click on the Spoilers tag to the right of this thread and see similar requests. There’s a great idea by @justjennifer using page jumps here: https://en.forums.wordpress.com/topic/spoiler-alert-plugin?replies=3#post-2493227

  • Unknown's avatar
    truecrisis · Member ·

    That’s strange. So you’re saying the code above did not work on your site?
    When I tested using the WordPress.com post editor, it successfully converted from HTML to the Visual editor and in Preview mode.

    Any more luck? Would love to see if you find a solution or if there’s anything further we can add here in the forums.

    Here is a 15 second video that shows that I couldn’t reproduce your results:
    https://screencast-o-matic.com/watch/cbjeXJlgvG
    As I understand it, it needs a business account to use JS.

  • staff-brock · Staff ·

    Thanks for the video – super useful to see what’s going on. Apologies for that not working!

    I recommend checking out the other solutions in the Spoiler tag as seen in the forum. Seems like an issue that has been brought up many times before, so you may find the solution you need!

    I recommend starting with checking out these posts:

    https://en.forums.wordpress.com/topic/spoiler-alert-plugin?replies=3#post-2493227

    https://en.forums.wordpress.com/topic/hmtl-spoilers?replies=14

  • Unknown's avatar
    truecrisis · Member ·

    Yeah, thanks again :)

    As I mentioned a few posts up, I’m gonna try to work with 

    <details>
<summary> Click here to see a spoiler </summary>
Your favorite Game of Thrones character has been killed!
</details>

    It gets the job done, even if it’s not supported in some browsers. Again, I still need to see if I can edit the display via CSS or something though.

  • staff-brock · Staff ·

    Yes, it’s a good option!

    Editing CSS is part of Business and Premium plans only. Here’s more on what you could achieve with CSS customizations:

    https://en.support.wordpress.com/custom-design/editing-css/

  • Unknown's avatar
    truecrisis · Member ·

    Sigh…

    Thanks for all the info.

  • The topic ‘Spoiler text / Expandable text box’ is closed to new replies.