I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways:
1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa
2) make Div 1 display = none when Div 2 display = block, and vice versa.
My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS?
I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time:
JS (from Option 2)
function getSearch() {
document.getElementById("searchcontainer").style.display = "block";
document.getElementById("blogcontainer").style.display = "none";
}
HTML
<div id="rightcontainer">
<div id="searchbox">
<form>
<input type="text" placeholder="Search..." required>
<input id="cardib" type="button" value="Search" onclick="getSearch()">
</form>
</div>
<button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">▼</button>
<button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">▲</button>
<div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
</div>
</div>
CSS
#blogcontainer{
width: 100%;
height: 90%;
float: left;
overflow-y: hidden;
padding: 0;
position: static;
float: left;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
#searchcontainer{
width: 100%;
height: 90%;
float: left;
overflow-y: hidden;
padding: 0;
position: static;
float: left;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
#rightcontainer {
height: 100vh;
width: calc( 100% - 20vh - (.678*(100%-20vh)));
position: fixed;
overflow: hidden;
background-color: gray;
margin-left: calc((.678*(100%-20vh)) + 20vh);
float: left;
margin-right: 0;
}