Over at Puzzling.SE, we require all answers to contain explanations. For riddles, what usually happens is that the answerer will post an explanation within a spoiler block for each line of the riddle. This can result in several spoiler blocks within the answer (here is a typical example). Someone who wants to read the answer to a riddle may have to click several times to reveal all of the spoiler blocks.

I propose a new feature to allow a user to automatically reveal all spoiler blocks in a post at once. Perhaps there can be an "spoil" link at the bottom of a post next to the "share", "edit", and "flag" links. When a user clicks on "spoil", all spoiler blocks within that post will be revealed. Of course, a user could still click on an individual spoiler block to reveal just that block.

  • 2
    Here, have some jQuery: $('.spoiler').css('color', 'inherit'). Converting this into a user-friendly clickable thing is left as an exercise for the reader.
    – senshin
    Feb 19 '15 at 22:37
  • Unspoiling something would be to hide it, or to not have it shown in the open
    – random
    Feb 19 '15 at 23:39
  • @random Good catch. Feb 19 '15 at 23:44
  • 3
    Inline spoiler blocks would also be a good idea for Puzzling... Feb 20 '15 at 9:40
  • @randal'thor A good idea, but they rejected an inline spoiler request. Feb 20 '15 at 17:47

I've made a userscript to do this, don't know if one already exists, but here it is:

$('#answers div[id*="answer"], div[id*="question"]').each(function() {
    $(this).find('.post-menu').append('<span class="lsep">|</span><a id="showSpoiler-' + $(this).attr("id") + '" href="javascript:void(0)">unspoil</span>');
$('a[id*="showSpoiler"]').click(function() {
    var x = $(this).attr('id').split(/-(.+)?/)[1];
    $('#'+x+' .spoiler').css('color', 'inherit'); //for normal text
    $('#'+x+' .spoiler a').css('color', '#0000FF').css('text-decoration', 'underline'); //for links
    $('#'+x+' .spoiler code').css('color', '#222').css('background', '#eee'); //for markdown

I've added it to my 'Additional Features' userscript at StackApps

  • 1
    An easier solution would be $(this).closest( '.answer, .question' ).find( '.spoiler' ).removeClass( 'spoiler' ); this is how the standard SE spoiler click handler does it. Also, if you want to make that SOUP-compatible, add .end().find( 'soup-spoiler' ).addClass( 'visible' ) to that. Feb 28 '15 at 15:37
  • @IlmariKaronen You're right! I didn't think of that - I just tried to remove what spoiler does (I seem to like to complicate things). I'll change that in a bit (as well as on the stack apps post) Feb 28 '15 at 15:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .