Elements not appearing when setting visibility to visible and using :checked pseudo-class

Question

Well, what I'm trying to do is hiding/showing the pictures and pictures' history when the user clicks on the "button", where it says "icon". I don't need any javascript since I read it's possible to get it done only using css. I used the checked:pseudo-class and followed a MDN's example, since that's exactly what I want to do (make them appear/disappear).

The problem I'm facing is when I click on the checkboxes. Elements don't show up. The elements' visibility remains in collapse despite I set it in visible.

.cardsContainer{
  display: flex;
  justify-content: space-between;
}

#f1, #f2, #f3{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  visibility: collapse;
}

.backgroundHistory, .backgroundHistory2, .backgroundHistory3{
  margin: 1em 0em 0em 0em;
  padding: 1.5em;
  background: #eceddd;
  border-style: solid;
  border-color: black;
  text-align: justify;
  margin-top: 0px;

  visibility: visible;

}

.buttonPicture{
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('https://cdn.icon-icons.com/icons2/1904/PNG/512/downarrow_121316.png') no-repeat;
}

.buttonSpace{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card{
  background-color: #e7edb4;
  margin: 0px;
  border-style: groove;
  border-color: white;
  padding-bottom: 0px;
  margin-left: .5em;
  margin-right: .5em;
}

#expand-toggle, #expand-toggle2, #expand-toggle3{
  display: none;
}

/*monaLisa*/

#expand-toggle:checked ~ *  #f1{
  visibility: visible;
}

#expand-toggle:checked ~ * .backgroundHistory{
  visibility: visible;
}

/*Artemisia*/

#expand-toggle2:checked ~ *  #f2{
  visibility: visible;
}


#expand-toggle2:checked ~ * .backgroundHistory2{
  visibility: visible;
}

/*the persistence of memory*/

#expand-toggle3:checked ~ *  #f3{
  visibility: visible;
}


#expand-toggle3:checked ~ * .backgroundHistory3{
  visibility: visible;
}

<div class="cardsContainer">
    <div class="card">
      <div class="buttonSpace">
        <input type="checkbox"  id="expand-toggle">
        <label for="expand-toggle"> <span class="buttonPicture"> "icon"</span> </label>
      </div>
      <figure id="f1">
        <img src="imgs/monaLisa.jpg" alt="Mona Lisa" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Leonardo da Vinci</i> (1503) <br>
        </figcaption>
      </figure>
        <p class="backgroundHistory">
          It was painted between 1,503 and 1,519, when Leonardo da Vinci lived in Florence, Italy.
          Currently, it's not known who the woman in the painting was; there's doubt about if she was
          really a woman.
        </p>
    </div>

    <div class="card">
      <div class="buttonSpace">
        <input type="checkbox"  id="expand-toggle2">
        <label for="expand-toggle2"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f2">
        <img src="imgs/kill.jpeg" alt="Artemisia" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Artemisia Gentileschi</i> (1620) <br>
        </figcaption>
      </figure>
        <p class="backgroundHistory2">
          This is an artwork by Artemisia Gentileschi, it's an oil painting. This painting is inspired on an Old Statement Bible story.
          This painting is a second attempt from the same Bible story, which was done previously. This is the most recognizable painting made
          by Artemisia Gentileschi.
        </p>
    </div>

    <div class="card">
      <div class="buttonSpace">
        <input type="checkbox"  id="expand-toggle3">
        <label for="expand-toggle3"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f3">
        <img src="imgs/tiempo.jpg" alt="Salvador Dalí" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Salvador Dalí</i> (1931)<br>
        </figcaption>
      </figure>
        <p class="backgroundHistory3">
          It was painted by spanish painter Salvador Dalí. Dalí painted this artwork when he was 28 years old and
          the surrealism movement was at its peak. By this time, he was officially joined with surrealist artists and
          developed his "Paranoiac Critical method"
        </p>
    </div>
  </div>

This is what it'd look like when the picture and picturess' elements have visibility set in visible. picture with visibility in visible

Thanks in advance. I've dealing with this too long and don't know what to do.

Answer 1

Move checkboxes above.

.cardsContainer{
  display: flex;
  justify-content: space-between;
}

#f1, #f2, #f3{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  visibility: collapse;
}

.backgroundHistory, .backgroundHistory2, .backgroundHistory3{
  margin: 1em 0em 0em 0em;
  padding: 1.5em;
  background: #eceddd;
  border-style: solid;
  border-color: black;
  text-align: justify;
  margin-top: 0px;

  visibility: visible;

}

.buttonPicture{
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('https://cdn.icon-icons.com/icons2/1904/PNG/512/downarrow_121316.png') no-repeat;
}

.buttonSpace{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card{
  background-color: #e7edb4;
  margin: 0px;
  border-style: groove;
  border-color: white;
  padding-bottom: 0px;
  margin-left: .5em;
  margin-right: .5em;
}

#expand-toggle, #expand-toggle2, #expand-toggle3{
  display: none;
}

/*monaLisa*/

#expand-toggle:checked ~ *  #f1{
  visibility: visible;
}

#expand-toggle:checked ~ * .backgroundHistory{
  visibility: visible;
}

/*Artemisia*/

#expand-toggle2:checked ~ *  #f2{
  visibility: visible;
}


#expand-toggle2:checked ~ * .backgroundHistory2{
  visibility: visible;
}

/*the persistence of memory*/

#expand-toggle3:checked ~ *  #f3{
  visibility: visible;
}


#expand-toggle3:checked ~ * .backgroundHistory3{
  visibility: visible;
}

<div class="cardsContainer">
    <input type="checkbox"  id="expand-toggle">
    <input type="checkbox"  id="expand-toggle2">
    <input type="checkbox"  id="expand-toggle3">

    <div class="card">
      <div class="buttonSpace"> 
        <label for="expand-toggle"> <span class="buttonPicture"> "icon"</span> </label>
      </div>
      <figure id="f1">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg" alt="Mona Lisa" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Leonardo da Vinci</i> (1503) <br>
        </figcaption>
      </figure>
        <p class="backgroundHistory">
          It was painted between 1,503 and 1,519, when Leonardo da Vinci lived in Florence, Italy.
          Currently, it's not known who the woman in the painting was; there's doubt about if she was
          really a woman.
        </p>
    </div>

    <div class="card">
      <div class="buttonSpace">
        <label for="expand-toggle2"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f2">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg" alt="Artemisia" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Artemisia Gentileschi</i> (1620) <br>
        </figcaption>
      </figure>
        <p class="backgroundHistory2">
          This is an artwork by Artemisia Gentileschi, it's an oil painting. This painting is inspired on an Old Statement Bible story.
          This painting is a second attempt from the same Bible story, which was done previously. This is the most recognizable painting made
          by Artemisia Gentileschi.
        </p>
    </div>

    <div class="card">
      <div class="buttonSpace">
        <label for="expand-toggle3"> <span class="buttonPicture"> "icon" </span> </label>
      </div>
      <figure id="f3">
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg" alt="Salvador Dalí" class="pictureAdjustment">
        <figcaption class="imageHistory">
          <i>Salvador Dalí</i> (1931)<br>
        </figcaption>
      </figure>
        <p class="backgroundHistory3">
          It was painted by spanish painter Salvador Dalí. Dalí painted this artwork when he was 28 years old and
          the surrealism movement was at its peak. By this time, he was officially joined with surrealist artists and
          developed his "Paranoiac Critical method"
        </p>
    </div>
  </div>