Inline spoiler/redacted tag to reveal text inline instead of in a spoiler window | World Anvil

Remove these ads. Join the Worldbuilders Guild

Inline spoiler/redacted tag to reveal text inline instead of in a spoiler window

User Interface (UI) / User Experience (UX) · Articles & templates · Created by MrXonte
closed
The current spoiler implementation places a big flashy button and shows the contents in a separate window. It would be nice to have an inline spoiler tag though where it either appears redacted and you can click anywhere on the redacted text to reveal it, similar to reddits inline spoileralthough it would also be nice to replace the text with a customizable text that can be clicked that is not as flashy as the current spoiler button.

The Team's Response

Great idea, but very little support and many good options from comments.
Current score

38/300 Votes · +5760 points

Votes Cast

  • +20

    by Damparo
    on 2022-01-30 10:47
  • +20

    by Elena-DirectorOfFLAMINGO
    on 2022-01-30 05:41
  • +300

    by A Revolutionary Bananafolk
    on 2022-01-28 12:45
  • +300

    by SpeedyEugene
    on 2022-01-28 00:14
  • +100

    by DunmerRogue5810
    on 2022-01-27 23:52
  • +10

    by Snake__Venom
    on 2022-01-26 10:44
  • +300

    by WolfofWinter
    on 2022-01-25 11:24
  • +300

    by A Goodhearted Bananafolk
    on 2022-01-25 07:15
  • +10

    by melior64
    on 2022-01-24 10:43
  • +10

    by Tsunavi
    on 2022-01-23 06:53
  • +300

    by Sicariouse
    on 2022-01-22 13:31
  • +10

    by Amancham
    on 2022-01-22 06:21
    Well... you can kind-of do it but without the reveal on clicking. I tried combining the redacted bbcode with a tooltip which does work. ████████████████████████   With access to the section bbcode and CSS editing you could also make a code that looks redacted but reveals the text on mouseover as previously stated.   I know both methods are not what you are really asking, but they might be a useful workaround.
  • +300

    by SilversongStudios
    on 2022-01-21 14:55
    That would be rly nice
  • +10

    by Kaleidechse
    on 2022-01-20 16:08
    Sounds useful - however, I'm worried that the first option would be hard to distinguish from the existing "redacted" BBCode. I can already see myself clicking on anything that looks blacked out on the off chance that it might be an inline spoiler, only to realize that it's just plain redacted. And with custom CSS, this could get even more confusing.   The second option, replacing it with a text that hints at the spoiler, appears more reader-friendly.
  • +50

    by Takedown
    on 2022-01-19 12:21
  • +200

    by b4w8
    on 2022-01-19 02:40
  • +300

    by morganarcher
    on 2022-01-19 00:56
  • +20

    by juldum54
    on 2022-01-19 00:35
  • +50

    by PrincessESH
    on 2022-01-19 00:28
    There's a way to do this with CSS, but it requires editing the "small" text tag, which means you can't ever have small text. It is also inaccessible to freemen.
  • +100

    by MightyLemur
    on 2022-01-18 19:46
  • +100

    by Squanto
    on 2022-01-18 18:32
  • +300

    by phork37
    on 2022-01-18 13:56
  • +50

    by toffepajja
    on 2022-01-18 09:06
  • +300

    by rootyful
    on 2022-01-17 15:28
  • +200

    by Lenosallose
    on 2022-01-17 08:38
  • +300

    by Scyoni
    on 2022-01-16 20:11
  • +300

    by torimiyaz
    on 2022-01-16 08:13
  • +300

    by picathartes
    on 2022-01-16 00:47
  • +300

    by sirintellegence
    on 2022-01-15 20:46
  • +50

    by Adcheryl
    on 2022-01-14 09:23
  • +10

    by GlJonny
    on 2022-01-13 21:04
  • +20

    by SpecterN7
    on 2022-01-13 13:57
  • +10

    by Starsavior
    on 2022-01-13 11:28
  • +300

    by Hanhula
    on 2022-01-13 00:06
  • +10

    by eccbooks
    on 2022-01-12 23:47
    While a tag would be great, you can create an inline spoiler with CSS (if you have access to custom CSS) already:  

    /* Creates an in-line spoiler. */

    /* Wrap content in . */

    /* Credits go to Rinaldo Bijker. */

    .user-css-presentation .inline-spoiler { background-color: black; color: transparent; margin: 0; cursor: default; } .user-css-presentation .inline-spoiler:hover { background-color: transparent; color: #050120; }
  • +50

    by A Rambunctious Dimensional Horror
    on 2022-01-12 15:51
  • +100

    by littletoes101
    on 2022-01-12 02:27
    This sounds like a very good idea!
  • +50

    by AuraGuard
    on 2022-01-12 01:07
  • +300

    by MrXonte
    on 2022-01-11 16:45