Javascript 或 HTML/CSS float div 问题，可能是其他问题

Question

*我讨厌一直问问题，但我在 Javascript 方面非常糟糕，尽管我已经上过好几门课。我有一个包含两个 div 的网页，我只想在查看者单击按钮时显示。 div 内部是一个关闭按钮。我不想切换到其他灯箱内容或再次完全更改它。我从某种方式开始，然后有人好心地将 Javascript 更改为另一种方法，这样它们就不会相互重叠。

这是编码:*

第一个 DIV + 按钮

<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 + 按钮(包含更多)

<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。 需要的 是将 Javascript 分配给特定的元素，而不是现在的样子。我也不完全理解它目前是如何工作的，但我的理解是它只影响打开按钮之前的元素/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>