отображать div при нажатии кнопки с тем же родительским div

Question

Я хочу, чтобы div отображался при нажатии кнопки.

Сейчас я могу отображать только то, что находится внутри кнопки, которую я нажму, например:

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}

.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
  height: auto;
  widht: 100%;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: #fff;
}
.submenu > p {
display: none;
background: green;
}

.active p {
display: block;
}

<div id="myDIV">
<div class="mainmenu">
  <button class="btn">1
  <div class="submenu">
  <p> TEST1</p>
  </div>
  </button>
  </div>
  <div class="mainmenu">
  <button class="btn">2  <div class="submenu">
  <p> TEST2</p>
  </div></button>
    </div>
  <div class="mainmenu">
  <button class="btn">3  <div class="submenu">
  <p> TEST3</p>
  </div></button>
    </div>
  <div class="mainmenu">
  <button class="btn">4  <div class="submenu">
  <p> TEST4</p>
  </div></button>
    </div>
  <div class="mainmenu">
  <button class="btn">5  <div class="submenu">
  <p> TEST5</p>
  </div></button>  </div>
</div>

Если я перемещаю div, который хочу отобразить вне кнопки, я знаю, что мне нужно настроить код javascript для отображения divкоторого сейчас нет в кнопке. к сожалению я не знаю как.

Итак, я в основном пытаюсь отобразить div (который работает в первом jsfiddle) при нажатии кнопки, но теперь я хочу вывести div из кнопки. (что я попробовал во втором jsfiddle) Когда я переместил div из кнопки, код не работает. Я уверен, что есть проблема с моим JavaScript, но я не знаю, как это исправить.

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}

.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
  height: auto;
  widht: 100%;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: #fff;
}
.submenu > p {
display: none;
background: green;
}

.active p {
display: block;
}

<div id="myDIV">
<div class="mainmenu">
  <button class="btn">1  </button>
  <div class="submenu">
  <p> TEST1</p>
  </div>

  </div>
  <div class="mainmenu">
  <button class="btn">2</button>  <div class="submenu">  
  <p> TEST2</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">3</button>  <div class="submenu">
  <p> TEST3</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">4</button>  <div class="submenu">
  <p> TEST4</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">5</button>  <div class="submenu">
  <p> TEST5</p>
  </div>  </div>
</div>

Можно ли это сделать и даже выровнять кнопки вправо, а div влево?

Answer 1

Выбор тега <p> в CSS неверен, так как вы теперь переместили div наружу, поэтому вам нужно выбрать такой тип,

.active + .submenu p {
    ....
}

+ означает элемент сразу после указанного элемента, но не внутри конкретных элементов.

Вот ваш обновленный код,

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}

.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
  height: auto;
  widht: 100%;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: #fff;
}
.submenu > p {
display: none;
background: green;
}

.active + .submenu p {
display: block;
}

<div id="myDIV">
<div class="mainmenu">
  <button class="btn">1  </button>
  <div class="submenu">
  <p> TEST1</p>
  </div>

  </div>
  <div class="mainmenu">
  <button class="btn">2</button>  <div class="submenu">  
  <p> TEST2</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">3</button>  <div class="submenu">
  <p> TEST3</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">4</button>  <div class="submenu">
  <p> TEST4</p>
  </div>
    </div>
  <div class="mainmenu">
  <button class="btn">5</button>  <div class="submenu">
  <p> TEST5</p>
  </div>  </div>
</div>