0

there are 3 buttons and when you click 3 of them showing the same content. I need to show unique content of buttons when you click on them seperately. how to make each button should show div's unique content?

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
span {
cursor:pointer;}
<span onclick="myFunction()"class="total">button</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 1
</div>
<span onclick="myFunction()" class="total">button2</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 2
</div>
<span onclick="myFunction()" class="total">button3</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 3
</div>
özgür kuş
  • 93
  • 1
  • 9
  • 1
    Having duplicate IDs is invalid. Familiarize yourself with the [DOM API](//developer.mozilla.org/en/docs/Web/API/Document_Object_Model). – Sebastian Simon Mar 25 '22 at 09:48

2 Answers2

-2

You gave the 3 divs the same ID , Which is not what you want ofcourse because the id is a unique selector for items .

From this point you can solve your problem

Regards

Yosef Bakry
  • 1
  • 1
  • Yes but I cant give different ID's to each of them because maybe I will have 50 more and it should work automatically somehow – özgür kuş Mar 25 '22 at 09:56
  • @OğuzKağanYatağan Then, again, familiarize yourself with the DOM API, specifically DOM navigation. Each `
    ` is the next element sibling of a ``. That’s trivial to find in the DOM. Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead.
     – Sebastian Simon Mar 25 '22 at 10:03
-3

why you have same id for three buttons? I think you can update its content by different button id.

lin mo
  • 1