CODEWITHSUNDEEP
javascripthtml
Flamee
Flamee

Reputation: 45

Multiple 'see more' buttons?

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>

Upvotes: 0

Views: 1198

Answers (2)

James
James

Reputation: 22237

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>

Upvotes: 1

Bj&#246;rn B&#252;ttner
Bj&#246;rn B&#252;ttner

Reputation: 80

An id is only allowed to be used once per page, so that your toggle script will not work as expected when you have multiple elements with the same id.

To make it functional, and keep the required changes to a minimum, you should do the following:

  • switch id to class so the HTML is valid
  • allow your toggle button to pass along itself, for example onclick="toggle(this)"
  • move through the dom to get to the element you want to toggle (parentNode, firstChild etc.)

Upvotes: 0

Related Questions