sorrow made you
from the bottom of the dark, dark sea
NOTICE! This was originally posted in my BBCode Tutorial thread which will be reworked and reposted. But here is for your convenience.
The Accordion BBCode has been one of my recent favorites. Especially when you start to implement color and graphics (images) to make them into clickable buttons instead of that solid gray.
Just like the BBCode Guide says, the Accordion is an alternative to the Tabs BBCode. It allows users to organize, compartmentalize and condense the amount of writing all together. I would consider this code to be one of the more versatile ones, considering its alteration capabilities.
The standard unaltered code for Accordion looks like this:
And will give you this:
The reason why I say the Accordion seems to be the most versatile is because its many different options.
In the BBCode Guide, there are given the options you can do to the [accordion] tag.
Here comes the fun part. Slides. Slides have the most customization, and are the trickiest part of this entire code. Slides go inside of the [accordion] [/accordion] tags, controlling the bars and the content that reveals itself when the bar is clicked on.
I'm going to put this in caps: BE INCREDIBLY CAREFUL WITH SLIDES. You can break the entire thread if its not done properly (I know, I've seen it. >_>;; ). Okay, maybe not break per se, but anyways.
Slides do NOT use brackets like the accordion ( [ ] ). They use these things: { }. Be careful when placing your slides. They won't work if the Slides are not in those special little brackets.
Now this is the section that everybody is looking forward to. I am going to break it down into sections:
• Editing Titles
• Adding Backgrounds
• Adding Borders to Erase Borders
Editing Titles
The titles are what I will be calling the text inside of the Slide tag. So essentially, what we are editing, is how the Slide bar looks.
If we take our sample 50% accordion code, we add edits to the title.
[accordion=50%]{slide=left | [B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B]}Blurb{/slide}
[/accordion]
Pretty much anything you do to the text INSIDE the {Slide} will show up. So feel free to play around with it. Just make sure that it is in between those funny brackets.
Adding Backgrounds
Here we go. This is the stuff everyone really wants. Just like you can edit the text in the slides, you can give them backgrounds. The code will look like this:
[accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}Blurb{/slide}
[/accordion]
Its as simple as that! You can add backgrounds around it as well (inside and outside of the code) to camouflage it. Example:
[bg=#ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}
[/accordion][/bg]
Adding Borders to Erase Borders
Do you see that ugly border around it?! Well there is a way to get rid of it. You simply put a 0px border around it using the [border] tag! Here's an example:
[bg=#ccdd88][border=0px solid #ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}
[/accordion][/border][/bg]
Make sure the border is around the [accordion] [/accordion] tags or else it won't disappear.
And that's about all it takes, guys! I hope this was beneficial to you all. If you have any more questions or more clarification, feel free to ask!
Arigatou gozaimashita!
//bows
The Accordion BBCode has been one of my recent favorites. Especially when you start to implement color and graphics (images) to make them into clickable buttons instead of that solid gray.
WHAT IS ACCORDION BBCODE?
Just like the BBCode Guide says, the Accordion is an alternative to the Tabs BBCode. It allows users to organize, compartmentalize and condense the amount of writing all together. I would consider this code to be one of the more versatile ones, considering its alteration capabilities.
The standard unaltered code for Accordion looks like this:
Code:
[accordion]
{slide=Text}Blurb{/slide}
[/accordion]And will give you this:
- Text
- Blurb
BREAKING DOWN THE ACCORDION
The reason why I say the Accordion seems to be the most versatile is because its many different options.
In the BBCode Guide, there are given the options you can do to the [accordion] tag.
So for example:
You want a small accordion to display. You would place the percentage number as 50%. The code would look like this:
[accordion=50%][/SIZE]
[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
And would look like this:
no slide
If you decide to add any other code edits, they will be separated by | ( Shift+\ key)
So you want it to float right of a text, it will look like this: no slide
[accordion=50% | fright][/SIZE]
[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
The bleft, bright, and bcenter will just align it, but won't float it (float is like what you do to images. See Image Float).
You want a small accordion to display. You would place the percentage number as 50%. The code would look like this:
[accordion=50%][/SIZE]
[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
And would look like this:
no slide
- Text
- Blurb
If you decide to add any other code edits, they will be separated by | ( Shift+\ key)
So you want it to float right of a text, it will look like this: no slide
- Text
- Blurb
[accordion=50% | fright][/SIZE]
[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
The bleft, bright, and bcenter will just align it, but won't float it (float is like what you do to images. See Image Float).
Here comes the fun part. Slides. Slides have the most customization, and are the trickiest part of this entire code. Slides go inside of the [accordion] [/accordion] tags, controlling the bars and the content that reveals itself when the bar is clicked on.
I'm going to put this in caps: BE INCREDIBLY CAREFUL WITH SLIDES. You can break the entire thread if its not done properly (I know, I've seen it. >_>;; ). Okay, maybe not break per se, but anyways.
Slides do NOT use brackets like the accordion ( [ ] ). They use these things: { }. Be careful when placing your slides. They won't work if the Slides are not in those special little brackets.
Just like the options for the accordion, you can align the text within the bar:
[accordion=50%][/SIZE]
[SIZE=12px]
{slide=left | Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
no slide
You still must use Shift+\ in order to separate the different functions.
The 'open' option will keep the accordion open when you first look at the post.
[accordion=50%][/SIZE]
[SIZE=12px]
{slide=left | Text}Blurb{/slide}[/SIZE]
[SIZE=12px]
[/accordion]
no slide
- Text
- Blurb
You still must use Shift+\ in order to separate the different functions.
The 'open' option will keep the accordion open when you first look at the post.
CUSTOMIZING ACCORDIONS
Now this is the section that everybody is looking forward to. I am going to break it down into sections:
• Editing Titles
• Adding Backgrounds
• Adding Borders to Erase Borders
Editing Titles
The titles are what I will be calling the text inside of the Slide tag. So essentially, what we are editing, is how the Slide bar looks.
If we take our sample 50% accordion code, we add edits to the title.
[accordion=50%]{slide=left | [B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B]}Blurb{/slide}
[/accordion]
- Text
- Blurb
Pretty much anything you do to the text INSIDE the {Slide} will show up. So feel free to play around with it. Just make sure that it is in between those funny brackets.
Adding Backgrounds
Here we go. This is the stuff everyone really wants. Just like you can edit the text in the slides, you can give them backgrounds. The code will look like this:
[accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}Blurb{/slide}
[/accordion]
-
Text
- Blurb
Its as simple as that! You can add backgrounds around it as well (inside and outside of the code) to camouflage it. Example:
[bg=#ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}
[/accordion][/bg]
-
Text
-
Blurb
Adding Borders to Erase Borders
Do you see that ugly border around it?! Well there is a way to get rid of it. You simply put a 0px border around it using the [border] tag! Here's an example:
[bg=#ccdd88][border=0px solid #ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}
[/accordion][/border][/bg]
-
Text
-
Blurb
Make sure the border is around the [accordion] [/accordion] tags or else it won't disappear.
And that's about all it takes, guys! I hope this was beneficial to you all. If you have any more questions or more clarification, feel free to ask!
Arigatou gozaimashita!
//bows
