Help How Do I Accordion?

[Honeybees]

So I'm having a bunch of trouble with accordions. It's a real struggle you know. Especially with this one. I don't know how to make it so that it doesn't move down (you'll see what I mean in the next post) and just staying where it s when you click on it.

 

[Honeybees]

THEME SONG​

Likes
Like 1
Like 2
Like 3​

Dislikes
Dislike 1
Dislike 2
Dislike 3​

Fears
Fear 1
Fear 2​

NAME
Trait 1 ☁︎ Trait 2 ☁︎ Trait 3 ☁︎ Trait 4 ☁︎ Trait 5​

Basics
Name: N/A
Date of Birth: N/A
Age: N/A
Gender: N/A
Pronouns: N/A
Sexual Orientation: N/A
Job: N/A

Appereance
Age: N/A
Nationality: N/A
Hair Colour: N/A
Eye Colour: N/A
Height: N/A
Weight: N/A

Personality

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Biography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Relationships

Lover
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Best Friend
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Friend
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Friend
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Acquaintance
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Acquaintance
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Acquaintance
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Acquaintance
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Enemy
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Enemy
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

 

[Amerikia1126]

For one, I can see you are using the rich text editor, this adds a bunch of junk code that makes things a bit harder to read. As for your accordions, let's see..

OH! Your columns! You have those 3 columns set to span5. The amount of spans that must be met in every row must be 8. right now yours is at 15. To fix this, you need to change those three columns containing the bbcodes to a 3 3 2 spans or a 2 2 2 2 span.

if you don't need that fourth column, you can hide text inside it [color=transparent].[/color].
I know there's a way to have a throwaway column for bbcode health and still have everything look perfectly centered but I don't know the code for it.

I believe that should do it, as your accordion and slide codes look and act fine, even with the rte editor jumble.

 

[Honeybees]

Amerikia1126
I have it turned off, yet it keeps seeming to add in a bunch of extra code anyways. I'll also try to edit the spans right now!

 

[Honeybees]

Amerikia1126
I also edited it to span 2 and it still does the thing heck

 

[Amerikia1126]

okay, so the site maintenance is finally done. (for now at least)

i reqorked your code, keeping the column's spans totalled to 8. what i noticed is you forgot to close a few tags and that some weren't closed in the right order. you would have something like

(slide)(size)(color)text(/slide)(/size)(/color)

bbcodes are basically a bunch of russian dolls, they all need to be inside each other, so a fix for the above error would be
(slide)(size)(color)text(/color)(/size)(/slide)

*extra code maifests itself when using the rich text editor, when your tags aren't properly closed, or when they're not closed in the right order*

[row][column=span1][color=transparent].[/color][/column][column=span2][bg=lavender][border=4px solid white][accordion=100%]{slide=444|[bg=lavender][font=Quicksand][color=#ffffff][size=7]Personality[/size][/color][/font][/bg]}[font=Quicksand][color=black]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.[/color][/font]{/slide}[/accordion][/border][/bg][/column][column=span2][bg=lavender][border=4px solid white][accordion=100%]{slide=444|[bg=lavender][font=Quicksand][color=#ffffff][size=7]Biography[/size][/color][/font][/bg]}[font=Quicksand][color=black]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.[/color][/font]{/slide}[/accordion][/border][/bg][/column][column=span2][bg=lavender][border=4px solid white][accordion=100%]{slide=444|[bg=lavender][font=Quicksand][color=#ffffff][size=7]Relationships[/size][/color][/font][/bg]}[font=Quicksand][color=black][size=5]Lover[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Best Friend[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Friend[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Friend[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Acquaintance[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Acquaintance[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Acquaintance[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Acquaintance[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Enemy[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

[size=5]Enemy[/size]
Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.[/color][/font]{/slide}[/accordion][/border][/bg][/column][column=span1][color=transparent].[/color][/column][/row]

 

[JayeTheKat]

Amerikia1126
I also edited it to span 2 and it still does the thing heck

Just a rough guess, but from what I can see, it may be a problem having to do with the fact that all your accordions are set to 100%. Let could possible be what causes to overlap when you open them. Try adjusting that '100%' in your accordion codes to '60%' or '50%' maybe? Nvm.

 

[Amerikia1126]

Just a rough guess, but from what I can see, it may be a problem having to do with the fact that all your accordions are set to 100%. Let could possible be what causes to overlap when you open them. Try adjusting that '100%' in your accordion codes to '60%' or '50%' maybe?

no, in the case of rows and columns the 100% tells the accordion to stay in its new cage. without that 100%, the *accordion will assume its default size, which will result in clipping and overlap.

 

[Honeybees]

Amerikia1126
Thank you so much oh my gosh! Thank you as well for letting me know about the closing codes. It may sound ridiculous but I never actually knew. This should really help out my coding now. Thank you for helping me out, I really appreciate it!

 

[Honeybees]

Final code boop. Thank you again!!

THEME SONG​

Likes
Like 1
Like 2
Like 3​

Dislikes
Dislike 1
Dislike 2
Dislike 3​

Fears
Fear 1
Fear 2​

NAME
Trait 1 ☁︎ Trait 2 ☁︎ Trait 3 ☁︎ Trait 4 ☁︎ Trait 5​

Basics
Name: N/A
Date of Birth: N/A
Age: N/A
Gender: N/A
Pronouns: N/A
Sexual Orientation: N/A
Job: N/A

Appereance
Age: N/A
Nationality: N/A
Hair Colour: N/A
Eye Colour: N/A
Height: N/A
Weight: N/A

Personality

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.

Biography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac dolor fermentum, cursus diam sit amet, imperdiet risus. Sed efficitur odio purus, elementum dignissim sem elementum nec. Vivamus tincidunt feugiat diam. Suspendisse dapibus vitae erat non fringilla. Etiam tincidunt dignissim tellus, sit amet ultricies neque pharetra ut. In facilisis, leo et sagittis venenatis, turpis dui tincidunt ipsum, at dictum leo nunc dictum tortor. Ut eget suscipit est. Ut volutpat, sapien non feugiat dapibus, dolor ante aliquam felis, tincidunt suscipit enim tortor a mi. Duis non metus vel eros sodales vehicula. Aenean vel urna nec sem pharetra aliquet. In mollis ullamcorper arcu, a facilisis tortor venenatis vitae.

Etiam mauris quam, tincidunt ac elementum vel, laoreet dignissim lacus. Vivamus dictum bibendum tellus. Praesent pulvinar semper lacinia. Aenean enim massa, pretium non vulputate eget, vestibulum quis est. In hac habitasse platea dictumst. Proin pulvinar quis tellus eget commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rutrum sapien rhoncus, dapibus lorem vel, sodales lorem.