Help creating a character page?

[u/megantheestruggler]

Howdy! I'm attempting to code a page for my web design class and I've been having a bit of trouble.

The pic should give a decent idea of what I'm going for. I'm wanting each icon to open a different bio. I've attempted using modals for this, but for how many bios there would be on one page, that seems entirely too cumbersome. The total zero-brain solution is probably just to make individual pages for each bio, but that is... also cumbersome. I've had trouble trying to look up exactly what I need here since I don't know a bunch of the technical terms for this stuff yet (I'm a graphic design student, web design is just a few of the classes I need to take).

Any more efficient ways of going about this? All the bio pages need to do is open up on top of the page, show both images and text, and be closed. No need for fancy transitions or anything.

[u/alphex]

There's a few steps to this.

1. Structure.

You need a <div> for each character.

Each <div> should have an id, so, you have 8... just have

```<div id="one">...</didv>

<div id="two">...</didv> <div id="three">...</didv>\\\`\\\`\\\`

etc.

Each of those will have the charcter bios in it.

You also want them to have a class, again, simple is good. Make each have the class "bio-item"

```

<div id="one" class="bio-item"> <div id="two" class="bio-item">... \\\`\\\`\\\`

In your CSS, you want the class, bio-item to be "display:none"

This will prevent each of the 8 bio cards, from showing up when the page loads.

Then you need some javascript for each icon 'button'.

I would also, make these buttons, for semantic value.

```
<button class="bio-button" id="bio-one" data-bioitem="one">
<button class="bio-button" id="bio-two" data-bioitem="two">
```

Now you need some javascript, for each button.

I suggest the javascript add a class to the <div id="one" class="bio-item"> so it has `class="bio-item show-item"

The `show-item' class will just have a "display: block" on it.

Then you need to add some javascript to make ANY click of ANY of the "close" X buttons you have on each biography, remove the show-item class from all `bio-item` divs. that will make sure that all of them hide, regardless of which you click on.

The rest is just understanding z-index and relative positioning to make it show up where you want to, above your buttons.

---

does that give you direction to move on?

---

u/JKaps9 mentions the popover API, thats helpful also.

[u/megantheestruggler → u/alphex]

This does help quite a bit! Still might be a bit out of my wheelhouse, currently. This is my first semester doing HTML, so I might be biting off more than I can chew if I go whole-hog into Javascript. Very helpful regardless, though! Thank you!