CODEWITHSUNDEEP
javascripthtmlcss
Fayakon
Fayakon

Reputation: 1523

JS: How to make sure only child div is toggled on click

Given example is working fine but red color is showing under Box2 only.

How to make sure if box1 is clicked then red should show below Box1, if Box2 is clicked box should show below box 2.

CODEPEN

function hideshowmenu() {
  var element = document.getElementsByClassName("box");
  element[0].classList.toggle("bg-red");
}
.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}
<div class="mainmenu " onclick="hideshowmenu()">BOX1</div>
<div id="box" class="box"></div>


<div class="mainmenu " onclick="hideshowmenu()">BOX2</div>
<div id="box" class="box"></div>

only one red should show at one time.

enter image description here

Upvotes: 0

Views: 158

Answers (4)

KooiInc
KooiInc

Reputation: 122956

First, the box-id is duplicated, not allowed in HTML. Next, using Event Delegation makes your life easier. If you want the class of div.box after a clicked div.mainmenu element to be bg-red, the next snippet may be an idea (note: creates 100 div.mainmenu elements after the handler is assigned).

document.addEventListener(`click`, handle);
createSomeBoxes();

function handle(evt) {
  if (evt.target.classList.contains(`mainmenu`)) {
//^ act only on div.mainmenu  
    const currentBox = document.querySelector(`.bg-red`);
    currentBox && currentBox.classList.remove(`bg-red`);
    
    return currentBox && currentBox.previousElementSibling === evt.target 
      ? true : evt.target.nextElementSibling.classList.add(`bg-red`);
  }
}

// for demo
function createSomeBoxes() {
  let nBoxes = 0;
  while(nBoxes++ < 100) {
    document.body.insertAdjacentHTML(`beforeend`,
    `<div class="mainmenu">BOX ${nBoxes}</div>
     <div class="box"></div>`);
  }
}
body {
  margin: 2rem;
  font: 12px/15px verdana, arial;
}

.mainmenu {
  cursor: pointer;
}

.bg-red {
  margin-top: 2px;
  background-color: red;
  height: 20px;
  width: 20vw;
}

Upvotes: 1

bazzas
bazzas

Reputation: 89

You should use event object to get a target node, and then append div with the class after it. The after function will move the div each time.

<div  class="mainmenu" onClick="hideshowmenu(event)">BOX1</div>          
<div  class="mainmenu"  onClick="hideshowmenu(event)">BOX2</div>

const redBox = document.createElement('div');
redBox.classList.add('bg-red');

function hideshowmenu(event) {
  const elem = event.target;
  elem.after(redBox)
}

https://jsfiddle.net/hj0rgkfp/

Upvotes: 1

Fabian S.
Fabian S.

Reputation: 2529

First remove the id's, you dont need them (and theyre not unique so they arent valid anyways).

Then youll need to iterate trough all your .mainmenu items and bin a click to hide all boxes and open the one right besides the item you clicked.

document.querySelectorAll(".mainmenu").forEach(function(menuElement) {
  menuElement.addEventListener("click", function() {
    document.querySelectorAll(".box").forEach(function(boxElement) {
      boxElement.classList.remove("bg-red");
    });

    this.nextElementSibling.classList.toggle("bg-red");
  });
});
.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}
<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
<div class="mainmenu">BOX3</div>
<div class="box"></div>
<div class="mainmenu">BOX4</div>
<div class="box"></div>
<div class="mainmenu">BOX5</div>
<div class="box"></div>
<div class="mainmenu">BOX6</div>
<div class="box"></div>
<div class="mainmenu">BOX7</div>
<div class="box"></div>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178350

You only trigger [0]

I would delegate

I also removed ID since IDs need to be unique

const container = document.getElementById("container");
const boxes = container.querySelectorAll(".box")
container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mainmenu")) {
    const thisBox = tgt.nextElementSibling;
    boxes.forEach(box => {
      if (box != thisBox) box.classList.remove("bg-red");
    })
    thisBox.classList.toggle("bg-red");
  }
})
.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}
<div id="container">
  <div class="mainmenu">BOX1</div>
  <div class="box"></div>
  <div class="mainmenu">BOX2</div>
  <div class="box"></div>
</div>

Upvotes: 1

Related Questions