在按钮按下时隐藏并显示div

Question

我有一个javascript函数，可根据click事件隐藏和显示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按钮旁边，并使位置绝对地向左和向上调整，并减小字体，如下所示。