Accordion BBCode

This is a BBCode Addition that will add the [expand] BBCode to your forum.

The expand tag creates a expandable/collapsable container to hold your content and should be very handy when it comes to organizing tutorials or any other extensive posts.

To use it you would just do [expand=caption]content goes here[/expand]
To see the example, you can click on this link (to see the hack installed on an actual Vbulletin Forum)

Not only can text can be put in an accordion box. You can put anything that you would want in between the expand tags!

Before asking any questions please read the readme of which installation you want (manual or auto). The readmes explain all that is necessary for installing this add-on.

***UPDATE march 8th/2005:
modified the code to auto-expand if person viewing a box does not have javascript enabled. now only one installation is needed (accordion_install.php).
--
optimized javascript function to be quicker.
--
made installing even easier, now uses relative paths (no more search n' replace)
--

-Enjoy!, JaGx

[news!]

I made a modification so users can click the caption instead of the arrow image:

<div class='panel'><p onClick="expandit(this);"><a href="#">{option}</a></p><script>document.write("<div style=\'display:none;\'>");</script><noscript><div></noscript><br><table class='vbmenu_popup'><tr><td>&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

are there any downsides to making this change?

How do I make a default [hide][/hide] that would have the caption: "click to reveal spoiler"?

[news!]

Originally Posted by news!

I made a modification so users can click the caption instead of the arrow image:

<div class='panel'><p onClick="expandit(this);"><a href="#">{option}</a></p><script>document.write("<div style=\'display:none;\'>");</script><noscript><div></noscript><br><table class='vbmenu_popup'><tr><td>&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

are there any downsides to making this change?

How do I make a default [hide][/hide] that would have the caption: "click to reveal spoiler"?

Thanks, but I figured this out. (I had to uncheck the Use {option})

[OrangeFlea]

I prefer to use input buttons (HTML), but how does one make it so the same button says "Show" and "Hide" (after the person clicks the button and the spoiler is shown)

[news!]

Some of my users are getting this bug:
"When I click on a spoiler to reveal it, the screen shoots back to the top of the page."

[OrangeFlea]

Originally Posted by k40tic

I know it was a line break is the reason i don't care. I never even really changes anything so in reality I never fixed anything. Actually never mind. I want a trophy for coming up with the easiest fix ever. The easy fix MVP trophy. I also want dancing bananas to come to my house and perform for my kids.
:banana: :banana:
Seriously though man this hack makes life easier for me so thanks.

It doesn't work for me for some reason. I still get the Error: expandit is not defined on the java console. I've even updated my java, so I don't know what the problem might be.

Second, how do I get mines to look/act exactly like this: Link

[Boofo]

Originally Posted by pimpery

alright thanks for the fix yoyooyyoyoyoyo, i did the fix in the attachments. so redownload if u havent yet.

The attachments still have it the old way.

[pimpery]

Originally Posted by Boofo

The attachments still have it the old way.

Ok, sorry for the delay, but I didn't see anyone posted here!
Let me answer all your questions:
1) GAHHH! Why do people use the POUND sign as a link. Where did this stupid ass habit come from?!! POUND is the operator to signify to goto an anchor. Without anything following the pound operator, the link will just take the person to the top of the page.
News!!:
take away that pound crap and just use:
<p onClick="expandit(this);">{option}</p>

2) Boofo: yoyooyoy didn't do anything. My brother was the one who replied to him and thanked him.
Any javascript parser, would not take into account whitespace unless there was a bug in it. A linebreak doesn't matter. yoyoyo's problem was probably that he didnt update his cache on the browser, (i know from experience, 10+ pms for the same stupid thing)

3) OrangeFleas PM:

Originally Posted by OrangeFlea

Pimpery! I love your accordion hack, but I was wondering if you knew how this site implemented the button:

http://boards1.wizards.com/member.php?u=310038

See how there's a hide and show button? How do I make mines exactly like that? Same button, same everything!

Thanks.

<-------------------REPLY---------------REPLY
REPLY---------------REPLY------------------->

They are using a different kind of spoiler thing that is way inefficient compared to mine.

Anyways, the way to do that would be for me to do it for ya!
Make sure you have the latest veresion of the Accordion BBCode Hack.

Goto BBCode manager and press edit on the expand bbcode

Find where it says:
<img src='cpstyles/vBulletin_3_Default/cp_expand.gif' border='0' onclick="expandit(this);">

Replace that with:
<input type='button' value='Show' onclick="if(this.value=='Hide'){this.value='Show'; }else{this.value='Hide';};expandit(this);">

[news!]

Thanks, that is great! The pound sign also makes the text a hotlink (i.e. the arrow turns into a pointing finger.

BTW if you want to know where I got the pound sign habit... Dreamweaver, I think I learned all my bad habits from using Dreamweaver. Don't get me wrong, I think it's one of the best at what it does (wyswyg html editor), but... it has made me lazy... Again thanks for this very useful hack and through implementing (and troubleshooting) it I've learned a lot about how vBulletin works (this is my first install... day four).

[pimpery]

Originally Posted by news!

Thanks, that is great! The pound sign also makes the text a hotlink (i.e. the arrow turns into a pointing finger.

BTW if you want to know where I got the pound sign habit... Dreamweaver, I think I learned all my bad habits from using Dreamweaver. Don't get me wrong, I think it's one of the best at what it does (wyswyg html editor), but... it has made me lazy... Again thanks for this very useful hack and through implementing (and troubleshooting) it I've learned a lot about how vBulletin works (this is my first install... day four).

no problem news. if you have any further questions feel free to ask!! ^_^

[pimpery]

<img src='cpstyles/vBulletin_3_Default/cp_expand.gif' border='0' onclick="expandit(this);" style="cursorointer;">

Use style="cursorointer;" instead of <a href> tag to have the pointer be a hand when it goes over the arrow.