Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
With the return of focus back on normal BBCode we are now back to the old ways. This information is based on an older guide (all kudos and credit to them) and I am simply creating an updated and cleaner tutorial on it for the coming days.
Accordions are sections of expandable and collapsible content boxes basically. They are usually utilized as an alternative to tabs. This is an accordion, simply click on a section header and it will expand to show the content.
The basic code from the BBCode Guide is as follows:
However, it is not limited to simply that. You can alter it in many different ways.
This section will be quite long showing both examples and the raw code to display how you can alter accordions.
You can set a percentage width for the accordion; keep in mind though that percentages on smaller screens (such as mobile) can cause the content to be squished.
You can also use set pixel widths! This will come with issues for those on mobile if you set the width too long it will go outside of the screen.
You can obviously change the header text as well. This can reflect the content you will display under a particular accordion section.
Note: Floats can be a tad annoying and may require additional line breaks over content may overlap. I've left those line breaks out here and you should be able to see the code being overlapped by the float.
When using the accordion tag in combination with a few other tags you can customize the appearance of the accordion itself rather than being stuck with the default colors. You'll be able to match it better and make it more aesthetically pleasing.
To customize this section you will be adding code/tags into the {slide=} section of the code.
You can change the alignment of the header like so:
Font, font color, and font size:
Background Color:
Now let's remove that ugly clunky border encasing the whole thing.
We can also remove that border padding:
Much like how the headers were customized the content can be customized as well. Just wrap the content with the tags such as [font][/font], [color=][/color], [size=][/size].
You can create a fairly nice and clean accordion now.
You can also combine the more 'hacky' ways to customize even more with CSS or just make things cleaner code-wise.
Hopefully this does a decent enough job in breaking down the accordion bbcode and what it is actually capable of. It's more useful and powerful than it seems at first glance.
WHAT IS AN ACCORDION
Accordions are sections of expandable and collapsible content boxes basically. They are usually utilized as an alternative to tabs. This is an accordion, simply click on a section header and it will expand to show the content.
- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
THE CODE
The basic code from the BBCode Guide is as follows:
Code:
[accordion]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]However, it is not limited to simply that. You can alter it in many different ways.
CODING OPTIONS
This section will be quite long showing both examples and the raw code to display how you can alter accordions.
Width
You can set a percentage width for the accordion; keep in mind though that percentages on smaller screens (such as mobile) can cause the content to be squished.
- Header
- Content
Code:
[accordion=50%]{slide=Header}Content{/slide}[/accordion]- Header
- Content
Code:
[accordion=100%]{slide=Header}Content{/slide}[/accordion]You can also use set pixel widths! This will come with issues for those on mobile if you set the width too long it will go outside of the screen.
- Header
- Content
Code:
[accordion=300px]{slide=Header}Content{/slide}[/accordion]Headers
You can obviously change the header text as well. This can reflect the content you will display under a particular accordion section.
- Header 1 Hello
- Content 1
- Header 2 World
- Content 2
- Header 3 !
- Content 3
Code:
[accordion]
{slide=Header 1 Hello}Content 1{/slide}
{slide=Header 2 World}Content 2{/slide}
{slide=Header 3 !}Content 3{/slide}
[/accordion]Alignment
- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion=bleft]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion=bcenter]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion=bright]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]Floats
Note: Floats can be a tad annoying and may require additional line breaks over content may overlap. I've left those line breaks out here and you should be able to see the code being overlapped by the float.
- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion=fleft]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion=fright]
{slide=Header 1}Content 1{/slide}
{slide=Header 2}Content 2{/slide}
{slide=Header 3}Content 3{/slide}
[/accordion]CUSTOMIZING
When using the accordion tag in combination with a few other tags you can customize the appearance of the accordion itself rather than being stuck with the default colors. You'll be able to match it better and make it more aesthetically pleasing.
Customizing Headers
To customize this section you will be adding code/tags into the {slide=} section of the code.
You can change the alignment of the header like so:
- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion]
{slide=right | Header 1}Content 1{/slide}
{slide=left | Header 2}Content 2{/slide}
{slide=center |Header 3}Content 3{/slide}
[/accordion]Font, font color, and font size:
- Header 1
- Content 1
- Header 2
- Content 2
- Header 3
- Content 3
Code:
[accordion]
{slide=[font=Raleway]Header 1[/font]}Content 1{/slide}
{slide=[font=Raleway][color=red]Header 2[/color][/font]}Content 2{/slide}
{slide=[font=Raleway][color=red][size=7]Header 3[/size][/color][/font]}Content 3{/slide}
[/accordion]Background Color:
-
Header 1
- Content 1
-
Header 2
- Content 2
-
Header 3
- Content 3
Code:
[accordion]
{slide=[bg=grey]Header 1[/bg]}Content 1{/slide}
{slide=[bg=pink]Header 2[/bg]}Content 2{/slide}
{slide=[bg=#336699]Header 3[/bg]}Content 3{/slide}
[/accordion]Removing the Border
Now let's remove that ugly clunky border encasing the whole thing.
-
Header 1
- Content 1
-
Header 2
- Content 2
-
Header 3
- Content 3
Code:
[border=0px][accordion]
{slide=[bg=grey]Header 1[/bg]}Content 1{/slide}
{slide=[bg=pink]Header 2[/bg]}Content 2{/slide}
{slide=[bg=#336699]Header 3[/bg]}Content 3{/slide}
[/accordion][/border]We can also remove that border padding:
-
Header 1
- Content 1
-
Header 2
- Content 2
-
Header 3
- Content 3
Code:
[border=0px; padding:0;][accordion]
{slide=[bg=grey]Header 1[/bg]}Content 1{/slide}
{slide=[bg=pink]Header 2[/bg]}Content 2{/slide}
{slide=[bg=#336699]Header 3[/bg]}Content 3{/slide}
[/accordion][/border]Customizing Content
Much like how the headers were customized the content can be customized as well. Just wrap the content with the tags such as [font][/font], [color=][/color], [size=][/size].
-
Header 1
-
Content 1
-
Header 2
-
Content 2
-
Header 3
-
Content 3
Code:
[border=0px; padding:0;][accordion]
{slide=[bg=grey]Header 1[/bg]}[bg=grey]Content 1[/bg]{/slide}
{slide=[bg=pink]Header 2[/bg]}[bg=pink]Content 2[/bg]{/slide}
{slide=[bg=#336699]Header 3[/bg]}[bg=#336699]Content 3[/bg]{/slide}
[/accordion][/border]PUTTING IT ALL TOGETHER
You can create a fairly nice and clean accordion now.
-
Header 1
-
Content 1
-
Header 2
-
Content 2
-
Header 3
-
Content 3
Code:
[border=0px; padding:0;][accordion=bcenter]
{slide=[bg=#F1DAC4][color=black][font=Raleway][size=5]Header 1[/size][/font][/color][/bg]}[bg=#F1DAC4][color=black]Content 1[/color][/bg]{/slide}
{slide=[bg=#A69CAC][color=black][font=Raleway][size=5]Header 2[/size][/font][/color][/bg]}[bg=#A69CAC][color=black]Content 2[/color][/bg]{/slide}
{slide=[bg=#474973][color=black][font=Raleway][size=5]Header 3[/size][/font][/color][/bg]}[bg=#474973][color=black]Content 3[/color][/bg]{/slide}
[/accordion][/border]You can also combine the more 'hacky' ways to customize even more with CSS or just make things cleaner code-wise.
-
Header 1
-
Content 1
-
Header 2
-
Content 2
-
Header 3
-
Content 3
Code:
[border=0px; padding:0;][accordion=bcenter]
{slide=[bg=#F1DAC4; color:black;font-size:20px;text-decoration:underline;][font=Raleway]Header 1[/font][/bg]}[bg=#F1DAC4; color:black]Content 1[/bg]{/slide}
{slide=[bg=#A69CAC; color:black;font-size:20px;font-weight:normal;][font=Raleway]]Header 2[/font][/bg]}[bg=#A69CAC][color=black]Content 2[/color][/bg]{/slide}
{slide=[bg=#474973; color:black;font-size:20px;font-variant: normal;][font=Raleway]Header 3[/font][/bg]}[bg=#474973][color=black]Content 3[/color][/bg]{/slide}
[/accordion][/border]GET CREATIVE
Hopefully this does a decent enough job in breaking down the accordion bbcode and what it is actually capable of. It's more useful and powerful than it seems at first glance.
