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

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})

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)

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

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

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:
<-------------------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);">

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!! ^_^

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