Help Accordions

[Kazu]

So I've been adjusting this for a while and I think I'm going to go crazy. Is there any way to add more accor
dions and move them down for space for a scrollbox, without also messing up the picture and quote?
I'm still trying to get the hang of this entire accordion and div box thing, and putting two and two together with the rows and columns is getting things kinda confusing for me. ;v;

So and So

/

Blablabla

Blurb

Blablabla

Blurb

.

"Yadayadayda insert quote here"

Edit:
Forgot to give the code, whoops.

Spoiler: Code

[CENTER][div=padding: 10px; background-color: #3a291e; border-radius: 5%; width: 15%; height: 30%; position: relative; left: 11%][FONT=Rock Salt][COLOR=#ff8000][B]So and So[/B][/COLOR][/FONT][/div][/CENTER]
[div=padding: 50px; border-radius: 30px; background: url(https://s-media-cache-ak0.pinimg.com/originals/89/5b/4b/895b4bb559a948ed77c91bb08edf3696.png) no-repeat center center; background-size: 100%;][COLOR=transparent]/ [/COLOR][/div][div=background-color: #3a291e; padding: 10px; border: 2px solid #594f48; border-radius: 35px;][row][column=span4]
[accordion=100%| bleft]{slide=center| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion][/column][column=span2][div=padding: 50px; background-image: url(https://s-media-cache-ak0.pinimg.com/564x/39/31/ff/3931ffd92cb7cd32425b1b57038b60cc.jpg); background-size: 100%; border: 1px solid rosybrown; border-radius:100%; height:100px; width:100px;position: relative;left:65%][COLOR=transparent].[/COLOR][/div]
[div=padding: 5px; background-color:indianred; border-radius:50px; width: 130%;height: 10%; position:relative; left: 50%; text-align: center;][FONT=Neucha]"Yadayadayda insert quote here"[/FONT][/div][/column][/row][/div]

 

[IctoraPost]

If you mean this:

So and So

/

Blablabla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.

Blablabla

Blurb

Blablabla

Blurb

Blablabla

Blurb

.

"Yadayadayda insert quote here"

then here you go.

[border=none]
[CENTER][div=padding: 10px; background-color: #3a291e; border-radius: 5%; width: 15%; height: 30%; position: relative; left: 11%][FONT=Rock Salt][COLOR=#ff8000][B]So and So[/B][/COLOR][/FONT][/div][/CENTER]
[div=padding: 50px; border-radius: 30px; background: url(https://s-media-cache-ak0.pinimg.com/originals/89/5b/4b/895b4bb559a948ed77c91bb08edf3696.png) no-repeat center center; background-size: 100%;][COLOR=transparent]/ [/COLOR][/div][div=background-color: #3a291e; padding: 10px; border: 2px solid #594f48; border-radius: 35px;][row][column=span4]
[accordion=100%| bleft]{slide=center|200| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion][accordion=100%| bleft]{slide=center| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion]
[/column][column=span2][div=padding: 50px; background-image: url(https://s-media-cache-ak0.pinimg.com/564x/39/31/ff/3931ffd92cb7cd32425b1b57038b60cc.jpg); background-size: 100%; border: 1px solid rosybrown; border-radius:100%; height:100px; width:100px;position: relative;left:65%][COLOR=transparent].[/COLOR][/div]
[div=padding: 5px; background-color:indianred; border-radius:50px; width: 130%;height: 10%; position:relative; left: 50%; text-align: center;][FONT=Neucha]"Yadayadayda insert quote here"[/FONT][/div][/column][/row][/div][/border]

If you don't mean that, I'm not sure what you mean.

 

[Kazu]

If you don't mean that, I'm not sure what you mean.

Ah, thank you so much-! I actually meant something like this:

Sorry for the confusion, and thank you for the help so far!

 

[IctoraPost]

So,

Spoiler: This?

So and So

/

Blablabla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.

Blablabla

Blurb

Blablabla

Blurb

Blablabla

Blurb

.

"Yadayadayda insert quote here"

[border=none][CENTER][div=padding: 10px; background-color: #3a291e; border-radius: 5%; width: 15%; height: 30%; position: relative; left: 11%][FONT=Rock Salt][COLOR=#ff8000][B]So and So[/B][/COLOR][/FONT][/div][/CENTER]
[div=padding: 50px; border-radius: 30px; background: url(https://s-media-cache-ak0.pinimg.com/originals/89/5b/4b/895b4bb559a948ed77c91bb08edf3696.png) no-repeat center center; background-size: 100%;][COLOR=transparent]/ [/COLOR][/div][div=background-color: #3a291e; padding: 10px; border: 2px solid #594f48; border-radius: 35px;][row][column=span4]
[accordion=100%| bleft]{slide=center|open|200| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion][accordion=100%| bleft]{slide=center| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion]
[/column][column=span2][div=padding: 50px; background-image: url(https://s-media-cache-ak0.pinimg.com/564x/39/31/ff/3931ffd92cb7cd32425b1b57038b60cc.jpg); background-size: 100%; border: 1px solid rosybrown; border-radius:100%; height:100px; width:100px;position: relative;left:65%][COLOR=transparent].[/COLOR][/div]
[div=padding: 5px; background-color:indianred; border-radius:50px; width: 130%;height: 10%; position:relative; left: 50%; text-align: center;][FONT=Neucha]"Yadayadayda insert quote here"[/FONT][/div][/column][/row][/div][/border]

or maybe

Spoiler: This?

So and So

/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.

Blablabla

Blurb

Blablabla

Blurb

Blablabla

Blurb

.

"Yadayadayda insert quote here"

[border=none][CENTER][div=padding: 10px; background-color: #3a291e; border-radius: 5%; width: 15%; height: 30%; position: relative; left: 11%][FONT=Rock Salt][COLOR=rgb(255, 128, 0)][B]So and So[/B][/COLOR][/FONT][/div][/CENTER]
[div=padding: 50px; border-radius: 30px; background: url(https://s-media-cache-ak0.pinimg.com/originals/89/5b/4b/895b4bb559a948ed77c91bb08edf3696.png) no-repeat center center; background-size: 100%;][COLOR=transparent]/ [/COLOR][/div][div=background-color: #3a291e; padding: 10px; border: 2px solid #594f48; border-radius: 35px;][row][column=span4]
[scroll=200px][div=background-color: white; padding: 10px; margin: -5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a justo purus. Curabitur maximus arcu posuere dui volutpat, euismod bibendum libero dictum. Proin ut pharetra dui. Proin eu enim tortor. Praesent a accumsan sem. Etiam fringilla pretium neque eu rhoncus. Ut vitae diam eu sem consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra massa at libero maximus volutpat. Nullam a enim id felis tincidunt porttitor tincidunt sed mauris. Ut sed hendrerit ex. Curabitur bibendum ultricies purus nec tristique. Donec tempor egestas est et egestas. Duis elementum diam mauris, at tristique ipsum porttitor a.

Sed tristique placerat lorem, id imperdiet est gravida eu. Suspendisse efficitur hendrerit mollis. Proin tristique ut ipsum auctor vestibulum. In vitae interdum massa, at rhoncus magna. Integer sed tincidunt est. Fusce iaculis sagittis justo non tristique. Morbi imperdiet gravida lectus, vitae tincidunt augue mattis in. Curabitur blandit molestie molestie. Vestibulum ut augue lobortis, rutrum neque vel, dignissim nisi. Mauris nisl lacus, lacinia non auctor id, vestibulum vel sem. Integer gravida commodo imperdiet. Aenean maximus pellentesque egestas. Proin varius at purus eu tempor.[/div][/scroll][accordion=100%| bleft]
{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion][accordion=100%| bleft]{slide=center| [bg=lightsalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}
[/accordion][accordion=100%| bleft]{slide=center| [bg=darksalmon][B][SIZE=5]Blablabla[/SIZE][/B][/bg]}Blurb{/slide}[/accordion]
[/column][column=span2][div=padding: 50px; background-image: url(https://s-media-cache-ak0.pinimg.com/564x/39/31/ff/3931ffd92cb7cd32425b1b57038b60cc.jpg); background-size: 100%; border: 1px solid rosybrown; border-radius:100%; height:100px; width:100px;position: relative;left:65%][COLOR=transparent].[/COLOR][/div]
[div=padding: 5px; background-color:indianred; border-radius:50px; width: 130%;height: 10%; position:relative; left: 50%; text-align: center;][FONT=Neucha]"Yadayadayda insert quote here"[/FONT][/div][/column][/row][/div][/border]

You also mentioned the image and the quote. Do you mean for it to be in the middle, vertically?

 

[Kazu]

Oh! The second one. That's what I was looking for. My problem was that when I tried moving the accordions, the image and quote got moved as well, when I wanted them to stay in the same place before the accordions were moved. I'm not sure if that makes sense or not, whoops.

Is there anyway to make the scrollbar thinner? I've seen many people do it, but for the life of me I can't seem to figure it out... Has anyone made a tutorial for that kind of thing?
I'm really grateful for all the help though! You're like the god of HTML and BBCode. 0o0)

 

[IctoraPost]

Oh! The second one. That's what I was looking for. My problem was that when I tried moving the accordions, the image and quote got moved as well, when I wanted them to stay in the same place before the accordions were moved. I'm not sure if that makes sense or not, whoops.

So the second one's fine now?

Is there anyway to make the scrollbar thinner?

I posted this just an hour ago. Mysterious coincidence. Keep in mind that it's not mobile friendly.

I'm really grateful for all the help though! You're like the god of HTML and BBCode. 0o0)

Aw, thanks, but there's a lot of people out there much better than me. I just help wherever I can.