'More details' button pushes row of images out of line

January 13, 2022

I have two rows of four div class thumbnails with a see more details button, which when pressed shows more text. When I was testing a single thumbnail it worked fine, but now with two rows of thumbnails. When the button is clicked, the other thumbnails are pushed the thumbnail out of the row alignment.

Java, Followed by CSS and then HTML. Can’t write it in for some reason

    function toggle(button){
    
        // this works because the button is immediately after the "moreDetails" element it pertains to
        let Text = button.previousElementSibling;
    
        // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
        //let Text = button.parentElement.querySelector(".moreDetails");
    
        if(Text.style.display == "none"){
            Text.style.display= "block";
        }
        else {
            Text.style.display = "none";
        }
    }

const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
  moreDetailses[i].style.display = "none";
}

.thumbnail-row {
  height: 400px;
  width: auto;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 01 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 02 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 03 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 04 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 05 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 06 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

>Solution :

Remove the fixed height of 400px from .thumbnail-row and make it a min-height instead. And then make it display:flex;

Here is what I changed:

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

See it all working here:

 function toggle(button){
    
        // this works because the button is immediately after the "moreDetails" element it pertains to
        let Text = button.previousElementSibling;
    
        // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
        //let Text = button.parentElement.querySelector(".moreDetails");
    
        if(Text.style.display == "none"){
            Text.style.display= "block";
        }
        else {
            Text.style.display = "none";
        }
    }

const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
  moreDetailses[i].style.display = "none";
}

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 01 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 02 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 03 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 04 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 05 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 06 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>