My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none".
Any assistance or recommendations would be greatly appreciated, and feel free to request more information if needed. Thank you.
I've also provided a JSfiddle link:
https://jsfiddle.net/fraserdale/8Lm78mbv/
<div id="mySidenav" class="sidenav1 change " style="width: 250px">
<ul style="list-style-type: none">
<li><a href="#">Thanks </a></li>
...
and the JS
<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('mySidenav');
if (x.style.display === 'none') {
x.style.display = 'block';
document.getElementById("mySidenav").style.marginLeft = "0px";
...
}
...
and finally the CSS
body {
background-color: #23272B;
margin: 0px;
padding: 0px;
outline: none;
}
.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
...
.full CSS content here...