Multiple 'see more' buttons?

January 4, 2022

I am looking to add multiple ‘see more’ buttons through out my page. At the moment when when I add a new one only the first button works and it breaks the second. So the first button works fine but when I’ve tried to copy this thumbnail over and make another one with the same see more details. The second button only changes the first thumbnails ‘see more’

function toggle() {
  let Text = document.getElementById('moreDetails');

  if (Text.style.display == "none") {
    Text.style.display = "block";
  } else {
    Text.style.display = "none";
  }
}

document.getElementById("moreDetails").style.display = "none";

<div id="thumbnail-frame">
  <div id="thumbnail" <div id="details">
    <div id="moreDetails">
      <h3> 001 </h3>
      <h3> Saturate Radio </h3>
      <h4> N00DS </h4>
    </div>
    <button title="Click to Show" type="button" onclick="toggle()">More Details</button>
  </div>
</div>
<div id="thumbnail-frame">
  <div id="thumbnail" <div id="details">
    <div id="moreDetails">
      <h3> 002 </h3>
      <h3> Saturate Radio </h3>
      <h4> N00DS </h4>
    </div>
    <button title="Click to Show" type="button" onclick="toggle()">More Details</button>
  </div>
</div>

>Solution :

Main problem is that you can’t have duplicate IDs on a page. Using classes works ok, or using relative position of your html elements.

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";
}

 <div class="details">

  <div class="moreDetails">

    <h3> 001 </h3>

    <h3> Saturate Radio </h3>

    <h4> N00DS </h4>

  </div>

  <button title="Click to Show"  type="button" onclick="toggle(this)">More Details</button>

</div> 



 <div class="details">

  <div class="moreDetails">

    <h3> 002 </h3>

    <h3> Saturate Radio </h3>

    <h4> N00DS </h4>

  </div>

  <button title="Click to Show"  type="button" onclick="toggle(this)">More Details</button>

</div>