скрыть и показать div при нажатии кнопки

Question

У меня есть функция javascript, которая скрывает и отображает div в зависимости от события щелчка.

работает хорошо, но каждый раз, когда отображается div, он расширяет все разделы героя, т.е. изображения героя, h1 текст. Так что все прыгает по мере расширения

Мне нужно показать скрытый div, развернуть карту, не делая фоновое изображение и тег h1 в одном разделе, чтобы не увеличивать и не увеличивать размер, когда скрытый div отображается после нажатия кнопки.

Вы можете попробовать это здесь по этой ссылке: https://micencostagebank.nl/index_september.php

просто дважды нажмите на кнопку сцены, и вы поймете, что я имею в виду.

function displayCheckBox() {
  var x = document.getElementById("myDIV");  
  if (x.style.display === "none") {
    x.style.display = "inline";
  } else {
    x.style.display = "none";
  }
}

<div id="myDIV">								
  <div class="form-check form-check-inline">
    <input class="btn btn-primary" type="radio" name="traineeship_type" id="10weeks" value="4">
    <label class="btn form-check-label" for="inlineRadio1">Beroeporiënterende stage</label>
  </div>

  <div class="form-check form-check-inline">
    <input class="btn btn-primary" type="radio" name="traineeship_type" id="20weeks" value="5">
    <label class=" btn form-check-label" for="inlineRadio2">Beroepsvoorbereidende stage</label>
  </div>							
</div>

Answer 1

Используйте видимость вместо отображения, комната, созданная для mydiv DOM, не очистится и больше не будет рывков, я тоже проверял на вашем сайте.

not to show  : visibility: hidden;
to show      : visibility: visible;

Если вы не хотите, как указано выше, то я предлагаю сделать текст справа от кнопок, рядом с кнопкой baan и сделать абсолютную позицию, отрегулировать влево и вверх и уменьшить шрифт, как показано ниже.