Advertisement:

Author Topic: [Tip] Collapsable Spoiler/Block Tag  (Read 30888 times)

Offline heavyccasey

  • Jr. Member
  • **
  • Posts: 212
[Tip] Collapsable Spoiler/Block Tag
« on: February 15, 2009, 03:29:49 AM »
Ever wished you had a spoiler tag on your forum? Well here's one now!

Sure, there are a lot of mods that do this, but it uses the standard BBC system and its JavaScript is simple.

The following is tested on 1.1.5 - 1.1.8 as well as on 2.0 RC1 (thanks Antechinus!), but other 1.1 versions should work also.

Default-titled Block
This block will have a preset title.

It looks like this:
[spoiler]Text here[/spoiler]

(Please ignore the pink, it's Valentine's Day! :P)

Subs.php
Find:
Code: [Select]
);

// This is mainly for the bbc manager, so it's easy to add tags above.  Custom BBC should be added above this line.

Add Before:
Code: [Select]
array(
'tag' => 'spoiler',
'before' => '<fieldset><legend onclick="var isHidden = this.parentNode.getElementsByTagName(\'span\')[0]; isHidden.style.display = isHidden.style.display ? \'\' : \'none\'" style="border-bottom: 1px dotted black">Spoiler </legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),

Custom-titled Block

[block=XYZ]Text here[/block]
Instead of "Spoiler", it will be replaced by "XYZ".

Subs.php
Find:
Code: [Select]
);

// This is mainly for the bbc manager, so it's easy to add tags above.  Custom BBC should be added above this line.

Add Before:
Code: [Select]
array(
'tag' => 'block',
'type' => 'unparsed_equals',
'before' => '<fieldset><legend onclick="var isHidden = this.parentNode.getElementsByTagName(\'span\')[0]; isHidden.style.display = isHidden.style.display ? \'\' : \'none\'" style="border-bottom: 1px dotted black">$1&nbsp;(click to show/hide)</legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),

...Or, you can add both.

If you want to use a button instead of text, take a look at this post.

And that's it! Enjoy!
« Last Edit: February 15, 2009, 05:16:02 AM by heavyccasey »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #1 on: February 15, 2009, 03:32:58 AM »
Does this work for all versions of SMF?

Offline heavyccasey

  • Jr. Member
  • **
  • Posts: 212
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #2 on: February 15, 2009, 03:41:33 AM »
Sorry, in my excitement, I forgot the version information. It'll work on 1.1.5 - 1.1.8. I think it'll work on 2.0, seeing as the BBC array has remained almost exactly the same, but I can't test it.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #3 on: February 15, 2009, 03:46:59 AM »
I'll test RC1 for you and post the results. :)

ETA: I'll tell you what would be a nice touch. Alter the code slightly so that instead of displaying text it displays a Hide/Show submit button like vB uses for the same purpose.
« Last Edit: February 15, 2009, 03:48:50 AM by Antechinus »

Offline Marcus Forsberg

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,608
  • Gender: Male
    • marcus.t.forsberg on Facebook
    • marcusforsberg on LinkedIn
    • @marcusforsberg on Twitter
    • marcusforsberg.net
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #4 on: February 15, 2009, 03:48:22 AM »
Moved to Tips and Tricks and added to Tips and Tricks (index). Thanks for your tip.

Offline heavyccasey

  • Jr. Member
  • **
  • Posts: 212
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #5 on: February 15, 2009, 03:57:18 AM »
ETA: I'll tell you what would be a nice touch. Alter the code slightly so that instead of displaying text it displays a Hide/Show submit button like vB uses for the same purpose.

If you insist...
Code: [Select]
array(
'tag' => 'spoiler',
'before' => '<fieldset><legend>Spoiler <button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),
array(
'tag' => 'block',
'type' => 'unparsed_equals',
'before' => '<fieldset><legend>$1 <button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),
There you go :)

EDIT: Actually, let me see if I can make the button look more pleasant..
« Last Edit: February 15, 2009, 03:58:51 AM by heavyccasey »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #6 on: February 15, 2009, 04:01:21 AM »
It works with RC1, but could be improved a little. Making it a complete mod adding the edits for Post.template.php to enable easy application of the tags would be nifty.  :D

ETA: Also with the hide/show button available the extra text is superfluous and could be ditched. Styling the button can be left to the theme's css. No real need to deal with that.
« Last Edit: February 15, 2009, 04:04:13 AM by Antechinus »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #7 on: February 15, 2009, 04:08:31 AM »
I know SMF 2 is supposed to be feature locked but this one is so good and so easy to add I might just annoy the devs about it.  ;D

This may result in an early death though.  :P

Anyway in practice I think just running this is sufficient:

Code: [Select]
array(
                'tag' => 'spoiler',
                'before' => '<fieldset><legend><button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
                'after' => '</span></fieldset>',
                'block_level' => true,
            ),

Offline heavyccasey

  • Jr. Member
  • **
  • Posts: 212
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #8 on: February 15, 2009, 05:00:23 AM »
I know SMF 2 is supposed to be feature locked but this one is so good and so easy to add I might just annoy the devs about it.  ;D
I'd be happy if my code was even the inspiration for something incorporated into SMF :)

I personally prefer the text over the button and a title over no title though.

Offline Kermit

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,365
  • Gender: Male
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #9 on: February 15, 2009, 05:26:16 AM »
I assume there is a mod already for that  ::)

http://custom.simplemachines.org/mods/index.php?mod=195
My Mods
Please don't PM/mail me for support,unless i invite you
Formerly known as Duncan85
Quote
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe."

A. Einstein

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #10 on: February 15, 2009, 05:40:01 AM »
Doing it this way is a lot simpler and it looks cleaner as well.

Anyway I thought of another tweak that I prefer even more. If you add this to the style.css:

Code: [Select]
/* A fieldset, for show and hide tags. */
fieldset
{
color: #000000;
background: none;
border: none;
margin: 0;
padding: 4px 4px 0 4px;
font-size: 11px;
line-height: 1.4em;
}

It gets rid of the border around the collapsed field and just shows the button. I prefer this as the default border styling doesn't match some custom themes anyway. Of course you could style the border in the fieldset class if you wanted to.

Offline heavyccasey

  • Jr. Member
  • **
  • Posts: 212
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #11 on: February 15, 2009, 05:49:17 AM »
I assume there is a mod already for that  ::)

http://custom.simplemachines.org/mods/index.php?mod=195
Actually, that looks much more complete than this. I'd use that... except I don't really need the extra options.

Anyway I thought of another tweak that I prefer even more. If you add this to the style.css:
I'd do that if I weren't so lazy. I just do it with inline styles... otherwise I'd have to edit every theme :P

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,208
  • Master of BBC Abuse
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #12 on: February 15, 2009, 06:01:47 AM »
I'm always editing the hell out of themes anyway so....................

Also I give the members around two dozen to choose from which means inline styles aren't going to work anyway.

ETA: For the button version I also added this to style.css:

Code: [Select]
button
{
    cursor: pointer;
}
« Last Edit: February 15, 2009, 06:04:51 AM by Antechinus »

Offline ksharks

  • Newbie
  • *
  • Posts: 6
Re: [Tip] Collapsable Spoiler/Block Tag
« Reply #13 on: February 21, 2011, 02:49:28 PM »
Hey, all I was just wondering if anyone had tested this on RC5?

Nevermind answered my own question. Yes it does work in RC5.
« Last Edit: February 21, 2011, 03:26:12 PM by ksharks »

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,895
  • Gender: Male