Help Assistance with Tabs and Accordion

[AshenAngel]

So this is the code for an old CS I had on another site and it works fine there. The way its supposed to work is you click the button to view the sheet and back to get to the image. It's driving me nuts trying to find where I'm going wrong here, as I've tried changing the accordions and tabs to follow this site's system and it broke further. So, let's just call this an Angel's SOS before I go too cross-eyed looking at this.

[div=
display: none;]
/* LOADING FONTS */
[FONT=IM Fell English SC]Header Font[/FONT]
[FONT=Port Lligat Sans[/FONT]
[/div][div=
/* ROOT START */

/* BACKGROUNDS */
--bg:url(BODY BACKGROUND URL HERE) 50% 50% / cover;
--body-bg: #E8ecfe;

/* ENTER 350 x 350 CHARACTER PORTRAIT */
--character-pic: url(CHARACTER IMAGE URL HERE);
--character-pic-size: 100%;
--character-pic-position: 50% 5%;

/* COLORS */
--main-color: #fff;
--accent-color: #bc0909;
--lighter-accent: #bc090948;
--h2-color: #6a1717;
--body-font-color: #000;

/* FONT FAMILIES */
--header-font: IM Fell English SC;
--subtitle-font: Port Lligat Sans;
--body-font: Port Lligat Sans;

/* FONT SIZES */
/* clamp(min, ideal, max) change min & max only for responsive font-sizes */
--header-size: clamp(50px, 5vw, 70px);
--subtitle-size: clamp(25px, 2vw, 35px);
--h2-size: 2rem;
--body-size: 1.3rem;

/* HEADER POSITIONING */
/* notes on alignment: flex-start (to position left) | center | flex-end (to position right) */
/* notes on h-offset: input 0 for none */
--name-h-offset: 10%;
--name-align: flex-start;
--role-h-offset: -10%;
--role-align: flex-end;

/* OTHER */
--button-border: 1px solid #ffffff90;
--mp3-font-color: #ffffff98;

/* ROOT END */][div=
/* TABS CONTAINER */
width: 444px;
margin: auto;
overflow: hidden;][div=
margin-top: -40px;][TABS=444x0]{slide=1}[div=
/* SLIDE OUTER CONTAINER */
overflow: hidden;
display: grid;][div=
/* SLIDE INNER CONTAINER */
grid-column-start: 1;
grid-row-start: 1;
width: 100%;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;][div=
width: 100%;
margin: auto;
height: 640px;
background: var(--character-pic) var(--character-pic-position) / var(--character-pic-size);
background-blend-mode: multiply;
mask: radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);][/div][/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--name-align);
translate: var(--name-h-offset) 17%;
font-family: var(--header-font);
font-size: var(--header-size);
color: var(--main-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--name-align);
/* ENTER FIRST NAME */]Noctus[/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--role-align);
translate: var(--role-h-offset) 25%;
font-family: var(--header-font);
font-size: var(--subtitle-size);
color: var(--accent-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--role-align);
/* ENTER POKEMON*/]Murkrow[/div][div=
/* BUTTON START */
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
translate: -10% -5%;][div=
width: 140px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=2}[COLOR=#fff]Read more[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][/div][/div]{/slide}{slide=2}[div=
/* SLIDE 2 OUTER CONTAINER */
overflow: hidden;][div=
/* SLIDE 2 INNER CONTAINER */
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;
padding: clamp(10px, 0.5vw, 20px);][div=
/* BUTTON START */
width: 80px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=1}[COLOR=#fff]Back[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][div=
/* BODY START */
flex: 1;
background: var(--body-bg);
border-radius: 30px;
padding: 5% 4% 5% 1%;][div=
height: 100%;
overflow: hidden;][div=
width: 110%;
height: 500px;
overflow-y: scroll;
margin-left: 3.5%;
padding-right: 5%;
font-family: var(--body-font);
font-size: 1.6rem;
color: var(--body-font-color);
/* ENTER BODY CONTENT */][div=
/* BASIC INFO */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Info[/div][B]Name:[/B] Noctus Verne
[B]Nickname:[/B] Noct
[B]Pokemon:[/B] Murkrow
[B]Moves:[/B] Sucker Punch, Drill Peck, Assurance, Haze
[B]Age:[/B] 24

[div=
/* PERSONALITY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Personality[/div]

[div=
/* BACKSTORY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Backstory[/div]Noctus was a very timid child when he was young. His parents were in the process of a nasty divorce

[div=
/* ABILITIES */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Abilities & Limitations[/div]Noctus has a keen sense of when things will go awry, however it only tends to be correct at night.
He can see perfectly in the dark.
He is incapable of flight.

[div=
/* PHYSICAL CHAR */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Physical Characteristics[/div][B]Height:[/B] 5'7"
[B]Weight:[/B] 120lbs
[B]Eye Color:[/B] Red
Noct is slim and delicate, with pale skin.

[div=
/* OTHER */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Other[/div]Kleptomaniac: Noct has a compulsion to steal shiny things.

[/div][/div][/div][div=
/* BODY END
MP3 PLAYER START */
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;
/* ENTER YOUTUBE ID (ALPHANUMERIC STRING IN URL) */][MEDIA=youtube]x9Mqu7loCHE[/MEDIA][/div][div=
height: 30px;
background: var(--lighter-accent);
border-radius: 30px;
display: flex;
gap: 5px;
top: -28px;
pointer-events: none;
color: var(--mp3-font-color);][div=
min-width: 50px;
font-size: 20px;
padding: 0 5px;][FA]fa-play-circle[/FA][/div][div=
display : flex;
align-items: center;
font-size: 12px;
/* ENTER SONG & ARTIST */]Phantylia the Undying (All Phases) | EPIC VERSION - Anthony Lo Re[/div][/div][/div][/div][/div]{/slide}[/TABS][/div][/div][/div]

/* LOADING FONTS */
Header Font
[FONT=Port Lligat Sans[/FONT]

[TABS=444x0]{slide=1}

Noctus

Murkrow

{tab=2}Read more{/tab}

{/slide}{slide=2}

{tab=1}Back{/tab}

Info

Name: Noctus Verne
Nickname: Noct
Pokemon: Murkrow
Moves: Sucker Punch, Drill Peck, Assurance, Haze
Age: 24

Personality

Backstory

Noctus was a very timid child when he was young. His parents were in the process of a nasty divorce

Abilities & Limitations

Noctus has a keen sense of when things will go awry, however it only tends to be correct at night.
He can see perfectly in the dark.
He is incapable of flight.

Physical Characteristics

Height: 5'7"
Weight: 120lbs
Eye Color: Red
Noct is slim and delicate, with pale skin.

Other

Kleptomaniac: Noct has a compulsion to steal shiny things.

Phantylia the Undying (All Phases) | EPIC VERSION - Anthony Lo Re

{/slide}[/TABS]

 

[Uxie]

hi! from what i can tell of your code, you may be misunderstanding how tabs work on rpn, as compared to the other site you used this code on. to my understanding, [tabs] is a bbcode function that should cannot be edited like so, [TABS=444x0], which you've done in your code. beyond that, i don't actually see any accordions in your present code, only {slide=1}{/slide} which doesn't actually work without the [accordion][/accordion] tag ヽ(￣ω￣ )

i would strongly advise you to read through the bbcode guide on accordions and tabs before making use of them to better understand the functionality and how the tags should be used! it would be good to also show what the code is supposed to look like so that others can assist in fixing as far as possible (ᵔ◡ᵔ)