HELP: Resources for making an accordion style character profile page?

[almostcorporeal]

Hey all! Sorry that this title isn't quite the clearest, I'm not really sure WHAT to call what I want to do on my page [which is why I'm trying to find resources here cuz idk what to pop into my search TT_TT ] so I've drawn it and I can explain how I want it to function to the best of my ability and maybe y'all can point me to how the heck I can get it done!

So I want it to start with a row of 4 100x100 character portraits for instance lined up like so:

[I've added lil faces so you can tell they're different characters (: ]

And then when you click on one of the 100x100 portraits, it expands the box to display a full portrait of the character along with biography, fun facts, any other information you choose, and the other 3 portraits get pushed over to the side of the expanded box like shown here?


[Apologies if these drawings aren't clear, I did them on my phone at 3am haha]

I've tried digging around to figure out how to do this on my own and found a few things like a "flex box accordion style cards" snippet but it expands the information below the initial row of images rather than adjusting the layout like I want it to do.

Is this possible? I should add that I'm on neocities [I understand they don't allow use of anything outside of HTML/CSS/JS?] if that changes anything!
Thank you for reading!

[Melooon]

Nothing is impossible when it comes to computers - the question is how much time will it take

I have to be candid though; to make this as a single page would be a challenging job for me (with quite a lot of knowhow) and I have no idea how Id approach it. I'd probably try to make each character box a large div that could be resized and cropped using overflow: hidden - then use some mix of flex and Javascript to animate it and switch between them.

HOWEVER, based on the fact that your asking, and looking at where your site is right now; I don't think you should take that path! You could fake this and get 90% of the way there if you split it into 2 separate pages.

Page 1: Based on your drawing is a set of profile pictures of the characters and each one is a link to page 2.
Page 2: is your second drawing - the big box is an iframe and the character buttons down the side are links like the ones on Page 1.

Depending on what character you click, it can load that characters bio into the iframe (you can do that easily using my frame script!)

The only tricky bit then is switching the profile pictures on the right of page 2 so they don't show the character your viewing.. that might need some custom JavaScript. However even if it needs custom script it would be MUCH more beginner friendly than trying to do it all as one page and a good was to learn!

I think if you just did a little looping script that hides the one you click and shows all the others - that would be super simple - but worry about that when you get there

If you do it this way; Your first step is try make the 2 pages - get the iframe and bio pages working - get links between them working - then you can come back here if you need help with that final script.

[almostcorporeal]

Nothing is impossible when it comes to computers - the question is how much time will it take

I have to be candid though; to make this as a single page would be a challenging job for me (with quite a lot of knowhow) and I have no idea how Id approach it. I'd probably try to make each character box a large div that could be resized and cropped using overflow: hidden - then use some mix of flex and Javascript to animate it and switch between them.

HOWEVER, based on the fact that your asking, and looking at where your site is right now; I don't think you should take that path! You could fake this and get 90% of the way there if you split it into 2 separate pages.

Page 1: Based on your drawing is a set of profile pictures of the characters and each one is a link to page 2.
Page 2: is your second drawing - the big box is an iframe and the character buttons down the side are links like the ones on Page 1.

Depending on what character you click, it can load that characters bio into the iframe (you can do that easily using my frame script!)

The only tricky bit then is switching the profile pictures on the right of page 2 so they don't show the character your viewing.. that might need some custom JavaScript. However even if it needs custom script it would be MUCH more beginner friendly than trying to do it all as one page and a good was to learn!

I think if you just did a little looping script that hides the one you click and shows all the others - that would be super simple - but worry about that when you get there

If you do it this way; Your first step is try make the 2 pages - get the iframe and bio pages working - get links between them working - then you can come back here if you need help with that final script.

I'm perfectly fine with things taking a bit of time and even a good heaping of elbow grease! :omg:k:
I'm also perfectly happy faking it if I can get something along the same lines as my silly little drawing, so thank you for that!

Looks like I've got a bit of asset creation [profile images and bios n such hehe] and fiddling to do! Thanks so much for the direction, and I'll be sure to come back if I have trouble with the script!!

[nymphaeaphoo]

I found a single page solution that requires no JavaScript.

Code

<section class=character-profile-wrapper>
 <!-- these divs are targeted by links as a way of specifying which character is selected -->
<!-- selectors 1 to 4 are the corresponding characters, selector 0 is used to select no one at all -->
<div id=accordion-select-0 class=accordion-selector></div>
<div id=accordion-select-1 class=accordion-selector></div>
<div id=accordion-select-2 class=accordion-selector></div>
<div id=accordion-select-3 class=accordion-selector></div>
<div id=accordion-select-4 class=accordion-selector></div>

<section class=character-profile-accordion>
<article class=character-profile>
<a href=#accordion-select-1 ><img src="hap.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-2 ><img src="sad.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-3 ><img src="meh.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-4 ><img src="poker.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
</section>
</article>
</section>

<style>
/* selector divs are fixed to the page so that when they are targeted the page doesnt scroll */
.accordion-selector {
position: fixed;
}

.character-profile {
width: 100%;
height: 100%;
overflow: hidden;
}

.character-profile img {
height: 100%;
float: left;
padding: 10px;
}

/* row of 4 */
.character-profile-accordion {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px;
}

/* make a big space for the selected character */
#accordion-select-1:target ~ .character-profile-accordion, 
#accordion-select-2:target ~ .character-profile-accordion,
#accordion-select-3:target ~ .character-profile-accordion,
#accordion-select-4:target ~ .character-profile-accordion
{
grid-template-columns: 1000px 200px;
grid-template-rows: 200px 200px 200px;
}

/* place targeted character in the big space, the rest automatically sort themselves into the free spaces */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1),
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2),
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3),
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4)
{
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

/* biography is hidden... */
.character-profile-biography
{
display: none;
}

/* ...unless its character is selected */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1) .character-profile-biography,
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2) .character-profile-biography,
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3) .character-profile-biography,
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4) .character-profile-biography
{
display: unset;
}

/* trivial styles */
.character-profile a  {
font-size: 30px;
}
.character-profile {
background-color: magenta;
}
.character-profile-accordion .character-profile:nth-child(2) {
background-color: blue;
}
.character-profile-accordion .character-profile:nth-child(3) {
background-color: yellow;
}
.character-profile-accordion .character-profile:nth-child(4) {
background-color: lime;
}
body {
background-color: #000000;
}
</style>
</section>

The images I used in the demo are 120x120 pixels. when you supply your images, depending on their size,  you may have to adjust the sizes of the css grid.


I have made a similar thing on my website before, using more or less the same techniques

If you have any questions let me know!

attached below is the video demo
v

[almostcorporeal]

I found a single page solution that requires no JavaScript.

Code

<section class=character-profile-wrapper>
 <!-- these divs are targeted by links as a way of specifying which character is selected -->
<!-- selectors 1 to 4 are the corresponding characters, selector 0 is used to select no one at all -->
<div id=accordion-select-0 class=accordion-selector></div>
<div id=accordion-select-1 class=accordion-selector></div>
<div id=accordion-select-2 class=accordion-selector></div>
<div id=accordion-select-3 class=accordion-selector></div>
<div id=accordion-select-4 class=accordion-selector></div>

<section class=character-profile-accordion>
<article class=character-profile>
<a href=#accordion-select-1 ><img src="hap.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-2 ><img src="sad.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-3 ><img src="meh.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-4 ><img src="poker.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
</section>
</article>
</section>

<style>
/* selector divs are fixed to the page so that when they are targeted the page doesnt scroll */
.accordion-selector {
position: fixed;
}

.character-profile {
width: 100%;
height: 100%;
overflow: hidden;
}

.character-profile img {
height: 100%;
float: left;
padding: 10px;
}

/* row of 4 */
.character-profile-accordion {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px;
}

/* make a big space for the selected character */
#accordion-select-1:target ~ .character-profile-accordion, 
#accordion-select-2:target ~ .character-profile-accordion,
#accordion-select-3:target ~ .character-profile-accordion,
#accordion-select-4:target ~ .character-profile-accordion
{
grid-template-columns: 1000px 200px;
grid-template-rows: 200px 200px 200px;
}

/* place targeted character in the big space, the rest automatically sort themselves into the free spaces */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1),
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2),
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3),
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4)
{
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

/* biography is hidden... */
.character-profile-biography
{
display: none;
}

/* ...unless its character is selected */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1) .character-profile-biography,
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2) .character-profile-biography,
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3) .character-profile-biography,
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4) .character-profile-biography
{
display: unset;
}

/* trivial styles */
.character-profile a  {
font-size: 30px;
}
.character-profile {
background-color: magenta;
}
.character-profile-accordion .character-profile:nth-child(2) {
background-color: blue;
}
.character-profile-accordion .character-profile:nth-child(3) {
background-color: yellow;
}
.character-profile-accordion .character-profile:nth-child(4) {
background-color: lime;
}
body {
background-color: #000000;
}
</style>
</section>

The images I used in the demo are 120x120 pixels. when you supply your images, depending on their size,  you may have to adjust the sizes of the css grid.


I have made a similar thing on my website before, using more or less the same techniques

If you have any questions let me know!

attached below is the video demo
v

Wow!! Thank you so so much! I really appreciate that! I'll be sure to reach out if things get tricky but from my initial look over I think I got it!!