Accordion BBCode

[pimpery]

This is a BBCode Addition that will add the 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
To see the example, you can click on this link (http://www.kerflap.com/forum/showthread.php?p=2) (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

[yoyoyoyo]

is there anything new from the beta version you posted earlier?

[pimpery]

yeh, i optimized the installer a bit.

[sirbutts]

whats different? should i reinstall with the new installer?

[pimpery]

whats different? should i reinstall with the new installer?
You can if you want. The installer is designed so that it doesnt do any harm if its already installed.

[k40tic]

I like it alot but I had to edit it a bit to get it to work with firefox. It worked fine with IE though when I tested it as it was. I prefer firefox to IE so here is what I done.

I took the follwing line
var folder='';function expandit(curobj){
Made the following changes
var folder='';
function expandit(curobj){
Now all is well for me and I don't get the expandit is not defined error anymore when using firefox.

[yoyoyoyo]

I like it alot but I had to edit it a bit to get it to work with firefox. It worked fine with IE though when I tested it as it was. I prefer firefox to IE so here is what I done.

I took the follwing line
var folder='';function expandit(curobj){
Made the following changes
var folder='';
function expandit(curobj){
Now all is well for me and I don't get the expandit is not defined error anymore when using firefox.cool- thanks!

[Snow]

Cool BBcode addition, thanks pimpery. And thanks k4otic for the firefox fix, worked great for me.

[pimpery]

Cool BBcode addition, thanks pimpery. And thanks k4otic for the firefox fix, worked great for me.
alright thanks for the fix yoyooyyoyoyoyo, i did the fix in the attachments. so redownload if u havent yet.

[k40tic]

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

Man what does a man have to do around here to get some credit for his work. :nervous: I'm the one who fixed it and yoyo just quoted my fix is all. I don't really care though man I'm just giving you a hard time.

[pimpery]

Man what does a man have to do around here to get some credit for his work. :nervous: I'm the one who fixed it and yoyo just quoted my fix is all. I don't really care though man I'm just giving you a hard time.
hehe, didnt notice k40tic. thanks for the fix, even though it was a simple linebreak ;) haha just givin you a hard time as well. enjoy the hack, and it still works for 3.07 incase you dont know.

[utw-Mephisto]

Finally installed it :)
Great one, automatic script is running smoothly :)

[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.

[sirbutts]

when is this hack going to be up for Hack Of The Month? i would vote for it, because you would think by the time u made it, that someone else woulda made it before you, but no, no one did. so its a breakthrough!! :nervous:

[pimpery]

lol i dont think itll get hack of the month. there are a lot so much more complex than it. it has come in handy a lot though on my tutorial site.

[memorex]

I like the hack and installed it. I do have a suggestion sence I'm dumb and wouldn't know what to do to add it. But is there a way to make it so that you can have the user select expanded or unexpanded as default in their usercp for when the code is used in a thread. I'd love to use both versions simply because I'd rather everything be closed when I first go into the thread. However that java issue is preventing the use of that hack due to some of my users complaints hehe. Just a thought. I do love the hack though :) It makes scrolling not so tidious on the long articles.

[pimpery]

FIX BELOW:
Please remember to replace the instance of http://yoursite.com/forum with the url to your forum.
This fix will just output a regular div, aka which is an expanded accordion box, if there's no javascript enabled since its in the noscript tags. Otherwise, it will use the document.write javascript function to write out a "display:none" styled div, which is aka a collapsed accordion box.

<div class='panel'>{option}&nbsp;&nbsp;&nbsp;&nbsp;<img src='http://yoursite.com/forum/cpstyles/vBulletin_3_Silver/cp_expand.gif' border='0' onclick="expandit(this);" onload="document.write("<div style=\'display:none;\'");"><noscript><div></noscript><br><table class='vbmenu_popup'><tr><td>&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

[sirbutts]

yeh, you should have. this new addition is great. people viewing the site with javascript-disabled, to avoid popups, still can see everything! thanks pimpery. this hack just keeps getting better

[pimpery]

yeh, you should have. this new addition is great. people viewing the site with javascript-disabled, to avoid popups, still can see everything! thanks pimpery. this hack just keeps getting better
sirbutts, no bugs or anything?
if u find any pm me.

[J.C.]

Wow nice hack... this could be useful for spoilers... *click install

Anyway what's the difference between expanded and collapse?

Thanks! :)

[Cyricx]

How can I change the background and font to use stylevars?

I have a few styles that use white writting, so they are showing up as a big blank box.

EDIT - Ahha! I got it :) Just changed the bbcode replacement to

<div class='panel'>{option}&nbsp;&nbsp;&nbsp;&nbsp;<img src='/forums/cpstyles/vBulletin_3_Silver/cp_expand.gif' border='0' onclick="expandit(this);"><div style="display: none;"><br><table class='vbmenu_popup'><tr class="alt1"><td class="alt1">&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

Awesome hack!! :)

[pimpery]

How can I change the background and font to use stylevars?

I have a few styles that use white writting, so they are showing up as a big blank box.

EDIT - Ahha! I got it :) Just changed the bbcode replacement to

<div class='panel'>{option}&nbsp;&nbsp;&nbsp;&nbsp;<img src='/forums/cpstyles/vBulletin_3_Silver/cp_expand.gif' border='0' onclick="expandit(this);"><div style="display: none;"><br><table class='vbmenu_popup'><tr class="alt1"><td class="alt1">&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

Awesome hack!! :)
cyricx:
just modify the class= tags to whatever class you want them to show up as. if you want to make a custom class, go head, just add it to the extra CSS definitions in the style manager. then have the class= value, as that class.

as for J.C.'s question, the difference is written in the readme, but ill go head and tell you anyways ;)

expanded, means the boxes are expanded by default, when the page loads

collapsed, means the boxes are collapsed by default, when the page loads

for the collapsed version, i added an optional fix above which will have the boxes be expanded by default, for the people without javascript

this way, even though they dont have javascript and cant press the buttons to expand/collapse the boxes, the boxes will be expanded by default, so they can see the contents inside.

[msimplay]

idont like it thhere is no point wat so ever for this hack

Stop being rude , if you feel theres no use for it then don't use it simple as. Besides other people might find it useful

[sirbutts]

kanye, leave pimpery alone or take it somewhere else. this is a thread for a hack, not for your problems.

as for the update: i had to remove the old functions from my global.js, but after that the auto-installer worked perfectly
i must ask though, how did you make the accordion boxes to open up automatically if the person doesn't have javascript? is it the noscript tag??
thanks pimpery, if im a n00b say so! ;)

[sirbutts]

kanye, leave pimpery alone or take it somewhere else. this is a thread for a hack, not for your problems.

as for the update: i had to remove the old functions from my global.js, but after that the auto-installer worked perfectly
i must ask though, how did you make the accordion boxes to open up automatically if the person doesn't have javascript? is it the noscript tag??
thanks pimpery, if im a n00b say so! ;)
yes, its the noscript tag. it will write out a collapsed div using javascript, only if they have js, otherwise its impossible :). if they dont, the noscript tag will take affect.

[pimpery]

yes, its the noscript tag. it will write out a collapsed div using javascript, only if they have js, otherwise its impossible :). if they dont, the noscript tag will take affect.
lol, did you just answer your own question? well good for you :D

[sirbutts]

yeh, i figured it out after a while :)

[pimpery]

yeh, i figured it out after a while :)
sirbutts, if u want to test out a new hack im making, contact me on aim, revengist.

[sirbutts]

sirbutts, if u want to test out a new hack im making, contact me on aim, revengist.
ive been on the past 3 days, and u havent :X

[pimpery]

well im on now, so im me, and please, use pms from now on.

[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 that would have the caption: "click to reveal spoiler"?

[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 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]

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 (http://boards1.wizards.com/member.php?u=310038)

[Boofo]

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]

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:
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{thi s.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]

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="cursor:pointer;">

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

[angelicGrace]

For those persons who might like a thought, this would make a great "spoiler" tag. in fact it may be replacing the spoiler tag i currently have in place, cause this is way cooler.

[HeloHi]

For those persons who might like a thought, this would make a great "spoiler" tag. in fact it may be replacing the spoiler tag i currently have in place, cause this is way cooler.

I used it for a "Not Safe for Work" tag, changed the bbcode tag to [nws] and made a new image, and kept a text blackout spoiler. This hack is awesome :)

Thanks :cool:

[Devii]

very nice, im going to try modify it into something a little cleaner looking, the dual borders are not needed.

[Rambo]

Great mod, useful.

Wondering, if you will update it to allow bbcodes used in the caption, cause at the moment i can't bold the text nor change its colour =O.

[pimpery]

Sorry for not posting in this thread so long:
I've done a little modding of the template and managed to stylize the boxes - I'll be posting an updated version where you can do this easily if there are a decent amount of requests for it.

Example of the newly updated bbcode: (As used for a tutorial!)
http://pop.pimpsofpain.com/showthread.php?t=3776

Also (I might release),
Another set of bbcodes that use javascript called "Anchor and Jump"
Example: (scroll down to bottom, and click "back to the top")
http://pop.pimpsofpain.com/showthread.php?p=32007#post32007

[sirbutts]

Damn! I like what you did with the boxes. Please make an autoinstaller for the new version! :D

[pimpery]

Damn! I like what you did with the boxes. Please make an autoinstaller for the new version! :D
Started it. It will be done in a couple of days (working on it with the free time I have)

[o0Hubba0o]

Auto installer gets this:

Step 2)

Appending new javascript function to vbulletin_global.js...

Error! The file, vbulletin_global.js in the clientscript folder, could not be written to!
Please make sure it exists and if it does chmod it to 777. After doing so, refresh this page


It does exists, and is chmod'ed to 777. I tried the manual install after and it shows up but only works in IE. I seen a FF fix on the first page, but that phrase isn't in anything.

[Cyricx]

Loving this code, will you be updating it for 3.5? :)

[pimpery]

Things have been really ++++ed lately. Too many bad things happening - I'll try to get it done ASAP. In the meanwhile checkout the other BBcode I made for 3.5 (Jump & Anchor)

[badblu]

this hack is good but in 3.5 RC2 i got the hack installed but when i go to click on the box to view the contents i get nothing except for an error on this page can anyone help.

[angelo70]

this hack is good but in 3.5 RC2 i got the hack installed but when i go to click on the box to view the contents i get nothing except for an error on this page can anyone help.

https://vborg.vbsupport.ru/showpost.php?p=773360&postcount=1

[badblu]

https://vborg.vbsupport.ru/showpost.php?p=773360&postcount=1

Thanks but that still doesn't work i keep getting a js error

[angelo70]

Thanks but that still doesn't work i keep getting a js error

Replacement code not change..
line enter or code edit error..

sorry.. i am not good at English

[Edrick]

It won't work on 3.5.1, I knew it wouldn't, any help on how to make it work on it?