Could <details> work for you?
#player {
border: 1px solid black;
font-size: 150%;
max-width: 100px;
height: 200px;
}
<div id="player">
PICTURE OF THE PLAYER
</div>
<details>
A very cool player!
</details>
For information on how to style details, you can have a look at MDN.
From what I read in your question, I don't think it's possible to do a collapse/expand with only CSS. I think you will need JavaScript to element.classList.toggle() the classes. Update: You're right, there are CSS only solutions to collapse/expand, you can check the StackOverflow answers I commented on your question and also this instructive post: http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php . Still, unless otherwise needed, it really seems to be easier to also use JavaScript.
Re-reading your question, I found what's wrong in it. You're using the wrong CSS selectors. When you use input~div you're selecting all divs that are preceded by an input. That means that when you click on #toggle, you are also selecting the div of #toggle2 (and also of toggle3, toggle4, etc.), because it is also preceded in the HTML by #toggle1.
You should use the input+div selector instead. This way only the divs that are placed immediately after an input will be selected. So #toggle:checked+div.expand will select only the div with class "expand" that is immediately preceded by #toggle (all the next divs will not be selected any more).
But for this to work, I had to put the divs immediately after the inputs in your HTML. Otherwise, they would not be selected. This does not make any difference since your <label> tags already reference (with for="...) your inputs' names.
I corrected your code and made some comments:
body {
font-family: "Open Sans", Arial;
}
main {
background: #EEE;
width: 300px;
margin: 20px auto;
padding: 10px 0;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
p {
text-align: center;
font-size: 13px;
}
input {
display: none;
visibility: collapse;
}
label {
display: block;
padding: 0.5em;
text-align: center;
}
label:hover {
//cursor: grabbing;
/*doesn't it make more sense to use 'pointer'?*/
cursor: pointer;
color: #000;/*what's the point of this rule?*/
}
.expand {
height: 0px;
overflow: hidden;
//color: #FFF;
/*this 'color' rule makes your text white.
In a white background-color, you can't see
the text, because background and text are white*/
}
section {
padding: 0 20px;
}
/*old: #toggle:checked~.expand {
I changed all "~" for "+" below:*/
#toggle:checked+.expand {
height: 300px;
}
#toggle:checked+label::before {
content: "-";/*this here adds an "-" before
the element. What's the point of this? I think you should get rid of these ::before selectors*/
}
#toggle2:checked+.expand {
height: 300px;
}
#toggle2:checked+label::before {
content: "-";
}
<!-- old: <input id="toggle" type="checkbox"> , I moved it below -->
<label for="toggle"><img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/148/55/202/46806932/1.0-1/46806932.jpg?t=1495555185000" width="200" height="250" alt=""/></label>
<input id="toggle" type="checkbox">
<div class="expand">
<section>
<h3>Lionel Messi</h3>
<p>A brief description of whatever</p>
</section>
</div>
<!-- old: <input id="toggle2" type="checkbox"> , I moved it below -->
<label for="toggle2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/DK-Beshiktash_%281%29.jpg" width="200" height="250" alt=""/></label>
<input id="toggle2" type="checkbox">
<div class="expand">
<section>
<h3>Other content</h3>
<p>Another paragraph</p>
</section>
</div>
An even better code would be:
.expand {
/*erase the 'height' and 'overflow' rules*/
display: none;
}
#toggle:checked+.expand {
display: initial;
}
Update: flexbox 4x4
Bear in mind that the client's screen size may vary (think of mobile devices too) and so may the browser window. A flexbox will make your content wrap if it reaches the end of the screen. But if you want a fixed 4x4 format, you can place 4 flexboxes on top of each other with the CSS set to flex-wrap: nowrap;, or even better, use a CSS grid for that. There are many tutorials on how to do it, but it will take you some time to get the hang of it.
Here's my suggestion for a wrapable flexbox:
(when running this code snippet, click on "Full page" and resize the browser window to see what I'm talking about)
.flex-container {
display:flex;
flex-wrap: wrap;
background-color: #ccc;
justify-content: space-around;
}
.flex-container>div {
background-color: #333;
color: white;
width: 200px;
height: 200px;
margin: 20px;
text-align: center;
}
<div class="flex-container">
<div>player1</div>
<div>player2</div>
<div>player3</div>
<div>player4</div>
<div>player5</div>
<div>player6</div>
<div>player7</div>
<div>player8</div>
<div>player1</div>
<div>player2</div>
<div>player3</div>
<div>player4</div>
<div>player5</div>
<div>player6</div>
<div>player7</div>
<div>player8</div>
</div>
I'm sorry if the answer is too verbose, I tried to be very clear since you told me you're beginning to code. Please tell me if there's anything unclear.
