How Do I make a <div> slide into view when a button is clicked?

Question

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> 

Answer 1

I think this jsfiddle may be useful for you.

$(document).ready(function(){    
$('#hide').click(function(){
    var hidden = $('.hidden');
    hidden.hide('slide', {direction: 'left'}, 400);
});

$('#show').click(function(){
    var hidden = $('.hidden');
    hidden.show('slide', {direction: 'left'}, 400);
});

});

https://jsfiddle.net/ZQTFq/3372/

Modify the code depending on your needs.