What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Tutorial Updated Stylized Accordions

Fyuri

見ぬが花
Administrator
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.

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.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top