I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton"><a href="#">Join The Battle</a>
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>