Javascript或HTML/CSS浮动div问题，其他问题也许

Question

*我讨厌继续提问，但我只是在Javascript中很糟糕，虽然我已经去过几个班。我有一个带有两个div的网页，我只想在查看器点击按钮时才显示。 div内是一个关闭按钮。 我不想切换到其他灯箱的东西或完全改变它。我开始是以某种方式，然后有人亲切地改变了Javascript到另一种方法，所以他们不会相互重叠。

这是编码：*

FIRST DIV + BUTTON

<div id="nodate" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="collapse.call(this);" /></span><b>There are no reservations listed under the date you selected. </b>Please select another date or ask for assistance. 
<br> 
<br> 
<image style="border:2px solid #000" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/shutterstock_9121894.jpg?1385086331177" width="200" /> 
</div> 
<input type="submit" style="background-color: #E0E0E0; padding: 4px; border: solid 2px #000; cursor:pointer; margin: 2px; border-radius: 10px;" value="Friday November 22nd, 2013" onclick="toggle.call(this);"></input> 

SECOND DIV + BUTTON（含有较多）

<br> 
<br> 
<div id="nodate2" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="collapse.call(this);" /></span><h2>Cool! We’ve got reservations for the date you selected. </h2> 

<u>Your name must use a proper format or you will receive a notice that your reservation could not be found.</u> 

<ul> 
    <li>&bull; Both First &amp; Last</li> 
    <li>&bull; First &amp; Last name must have first letter capitalized</li> 
    <li>&bull; Single space between first &amp; last name</li> 
</ul>Ex: Austin Block 
<br><br> 
<left> 
<b>Input Your Name</b><br> 
<form name="login" style="margin: 0px"> 
<INPUT TYPE="text" NAME="pass" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br> 
<input type="button" value="Click to Continue" style="width : 150px; margin: 3px" onClick="TheLogin(this.form)"> 
</form><font color="red">(You MUST use the button. Return key will NOT work.)</font> 
</center> 
<br> 
<br> 
<image style="border:2px solid #000" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/reservations2.jpg?1385069953644" width="200" /> 
</div> 

<input type="submit" style="background-color: #E0E0E0; padding: 4px; border: solid 2px #000; cursor:pointer; margin: 2px; border-radius: 10px;" value="Saturday November 23rd, 2013" onclick="toggle.call(this);"></input> 

JAVASCRIPT

<script> 
var toggle = function() { 
var mydiv =this.previousElementSibling; 
mydiv.style.display = (mydiv.style.display || 'block') === "block" ? 'none' :'block' 
} 
var collapse = function(){ 
this.parentElement.parentElement.style.display = 'none'; 
} 
</script> 

我没有包括CSS。 什么是需要是分配给特定的元素，而不是它现在是什么。我也没有完全理解它目前的工作方式，但我理解的是它只是在打开按钮之前影响元素/ div。我需要解决这个问题的原因是因为当我把它放在一个表格中时，它会将div（绝对定位）移动到表格结束的位置。我不知道为什么，也许有别的东西导致它，但任何帮助，非常感谢。

Answer 1

试试这个：

<script> 
     var activeDiv =""; 
     var toggle = function() { 
      var mydiv = this.previousElementSibling; 
      mydiv.style.display = (mydiv.style.display || 'block') === "block" ? 'none' : 'block' 
      if((activeDiv != mydiv.id)&& (activeDiv!="")) 
       collapse(activeDiv); 
      activeDiv = mydiv.id; 
     } 
     var collapse = function (id) { 
      var activeDiv = document.getElementById(id); 
      activeDiv.style.display = 'none'; 
     } 
</script>