Html Question posted in
Some basic documentation can be found here.

Html – change multiple div w/javascript

How can I include div 3 and 4 and 5 and 6 and so on ?
I want to overwrite multiple content items with a button / switch

content id 1 and 3 is always visible and changes after clicking / swtich with the buttons

function openOne(oneName) {
  var i;
  var x = document.getElementsByClassName("one");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(oneName).style.display = "block";  
}
<div id="1" class="one">
<p>Content 1</p>
<p>Content 2</p>
</div>

<div id="2" class="one" style="display:none">
<p>replaced Content 1</p>
<p>replaced Content 2</p>
</div>

<div id="3" class="one">
<p>Content 3</p>
<p>Content 4</p>
</div>

<div id="4" class="one" style="display:none">
<p>replaced Content 3</p>
<p>replaced Content 4</p>
</div>

<div id="myDIV">
  <button class="bttn activ" onclick="openOne('1')">Content</button>
  <button class="bttn" onclick="openOne('2')">replaced Content</button>
</div>
Tags:

2

Answers


  1. 0

    It’s not entirely clear what you want but my best interpretation is that you want to be able to toggle multiple elements like so:

    function openOne(oneName) {
  var i;
  var x = document.querySelectorAll(".one, .two");
  for (i = 0; i < x.length; i++) {
    var d = (x[i].classList.contains(oneName))?"block":"none";
    x[i].style.display = d;
  }  
}
    <div id="1" class="one">
<p>Content 1</p>
<p>Content 2</p>
</div>

<div id="2" class="two" style="display:none">
<p>replaced Content 1</p>
<p>replaced Content 2</p>
</div>

<div id="3" class="one">
<p>Content 3</p>
<p>Content 4</p>
</div>

<div id="4" class="two" style="display:none">
<p>replaced Content 3</p>
<p>replaced Content 4</p>
</div>

<div id="myDIV">
  <button class="bttn activ" onclick="openOne('one')">Content</button>
  <button class="bttn" onclick="openOne('two')">replaced Content</button>
</div>
    Login or Signup to reply.
  2. 0

    Maybe you should move away from the id based approach, as this does not scale very well when you want to add further divs.

    I based the following snippet on the classes one and two:

    const sels=[".one",".two"];
document.querySelectorAll("button").forEach((btn,i)=>btn.addEventListener("click",swap(i)));

function swap(i){
 return function(ev){
  document.querySelectorAll(sels[i]).forEach(d=>d.style.display="");
  document.querySelectorAll(sels[1-i]).forEach(d=>d.style.display="none");
}}
swap(0)();
    <div class="one">
<p>Content 1</p>
<p>Content 2</p>
</div>

<div class="two">
<p>replaced Content 1</p>
<p>replaced Content 2</p>
</div>

<div class="one">
<p>Content 3</p>
<p>Content 4</p>
</div>

<div class="two">
<p>replaced Content 3</p>
<p>replaced Content 4</p>
</div>

<div id="myDIV">
  <button>Content</button>
  <button>replaced Content</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search