Advertisement:

Author Topic: [Tip] Collapsable Spoiler/Block Tag  (Read 28465 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,136
  • 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,136
  • 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,136
  • 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,136
  • 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,136
  • 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,136
  • 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,887
  • Gender: Male
  • Sapienti satis.
My Mods

Sugested that too. Hey ho. I'd link you to the original discussion but it's not visible to most people (seekrit team board stuff that is more dangerous than wikileaks).


Don't PM me for support! Use the appropriate support board!