javascript - Slide div in from right -

javascript - Slide div in from right -

i have next code in shopify theme.

<script language="javascript"> function setvisibility(id) { if(document.getelementbyid('opensign').value=='hide layer'){ document.getelementbyid('opensign').value = 'show layer'; document.getelementbyid(id).style.display = 'none'; }else{ document.getelementbyid('opensign').value = 'hide layer'; document.getelementbyid(id).style.display = 'inline'; } } </script>

can add together boxes slided in right? code boxes below:

<a href="#" id="opensign" onclick="setvisibility('sign');";>sign in</a> <div id="sign"> blaslasd. </div>

you can utilize css class hiding, should added beginning:

.hide { left: 100%; opacity: 0; }

and class transitions:

.animated { transition: left 1s; -webkit-transition: left 1s; }

then in javascript, add together , remove hide class. can see demo on codepen here.

javascript html css