CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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/

CodePudding user response：

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 >BOX ${nBoxes}</div>
     <div ></div>`);
  }
}

body {
  margin: 2rem;
  font: 12px/15px verdana, arial;
}

.mainmenu {
  cursor: pointer;
}

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