showing and hiding sidenav with javascript

Question

trying to implement this code . here is my html.the close button is supposed to hide the entire nav instead it only loses its width property.i would like to have the nav elements including the list and avatar.is there a different way to approach this.why is toggling the width of my containing nav not hide the containing elements

                  <nav id="nav">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

                    <div id="avatar" >
                        <img src="nerdy-dog.jpg" alt="in a moment"></img>
                        <p>John Samba</p>
                        <p class="title">Web Developer</p>
                    </div>
                    <div class="brief">
                    <article  >

                            <h7 style="background-color:deepskyblue;padding:0 5px;" >->Brief</h7>
                            <span>
                            <p >Based in <strong>Nairobi,Kenya</strong></p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl
                                consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam...
                                </span>
                        </article>

                    </div>
                    <div id="credits">

                    </div>
                    <ul>
                        <li><a class="active" href="index.html" style="text-decoration-line: underline; padding-top:50px;">All</a>
                        </li>
                        <li><a href="work.html">Projects</a></li>
                        <li><a href="about.html">About me</a></li>
                        <li><a href="link.html">Collaborate</a></li>
                        <li><a href="hire.html">To Hire me</a></li>
                    </ul>
                </nav>

here is the javascript

'use strict';
function closeNav() {
    document.getElementById("nav").style.width="0";
}

here is the css

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    background: url(header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}
#wrapper{
    position: relative;
    margin: 0;
    height: 100%;

}
nav{
height: 100%;
    position: absolute;
    left: 100px;
    padding-top: 350px;
    width: 200px;
    display: block;
align-content: center;
}
.closebtn{
    position: fixed;
    top: 60px;
    left: 70px;
    font-size: 36px;
    text-decoration-line: none;
}

#avatar{

    background: deepskyblue;
    opacity: .7;
    position: absolute;
    top: 50px;
    width: 200px;
    height:60px;
    display: block;
   align-content: center;
border-radius: 30px;


}
#avatar img{


    height: 60px;
    width: 60px;
    border-radius: 50%;




   /* border-width: medium;*/
    float: left;

}
#avatar p{
    position: absolute;
   text-align: right;
   right: 18px;
}
#avatar :first-of-type {
 margin: 0;   
color:  white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
font-size: 15px;
kerning: 10px;
top: 10px;

}
#avatar :last-of-type{
    color: white;
    top: 12px;
    font-weight: 800;
    font-size: 16px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
header nav  .brief{
    margin-top: -180px;
    position: relative;
    color:white;
    top: 0;
    text-align: center;
    padding: 0 12px;
    height: 190px;
    opacity: .8;
    font-weight: 600;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
 /*nav .brief span{
    background-color: lightsteelblue;

}
*/

nav ul{
display: inline-block;
padding-top: 80px;
position: absolute;
top: 350px;
}

nav ul li{

    display: block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    list-style-type: none;
    padding: 10px;
    text-align: center;

}
nav ul li a{
    color:white;
    opacity: .7;
    text-decoration: none;


}
.active{
    background-color: deepskyblue;
    width: 50px;
    color: white;
    padding:10px;
    border-radius: 20px;
}

Answer 1

If you want a sliding effect then you need to use width . If you add the CSS below to your styling then the nav element will have a transition from its initial width, to a width of 0. In this process it will hide itself due to the overflow being hidden.

nav {
  overflow: hidden;
  transition: 0.2s all;
}

Let me know if that wasn't what you were hoping for.

---

Demo

 function closeNav() { document.getElementById("nav").style.width = "0"; } 

 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { margin: 0; padding: 0; background: url(header.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #wrapper { position: relative; margin: 0; height: 100%; } nav { height: 100%; position: absolute; left: 100px; padding-top: 350px; width: 200px; display: block; align-content: center; overflow: hidden; transition: 0.2s all; } .closebtn { position: fixed; top: 60px; left: 70px; font-size: 36px; text-decoration-line: none; } #avatar { background: deepskyblue; opacity: .7; position: absolute; top: 50px; width: 200px; height: 60px; display: block; align-content: center; border-radius: 30px; } #avatar img { height: 60px; width: 60px; border-radius: 50%; /* border-width: medium;*/ float: left; } #avatar p { position: absolute; text-align: right; right: 18px; } #avatar :first-of-type { margin: 0; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; font-size: 15px; kerning: 10px; top: 10px; } #avatar :last-of-type { color: white; top: 12px; font-weight: 800; font-size: 16px; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } header nav .brief { margin-top: -180px; position: relative; color: white; top: 0; text-align: center; padding: 0 12px; height: 190px; opacity: .8; font-weight: 600; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } /*nav .brief span{ background-color: lightsteelblue; } */ nav ul { display: inline-block; padding-top: 80px; position: absolute; top: 350px; } nav ul li { display: block; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; list-style-type: none; padding: 10px; text-align: center; } nav ul li a { color: white; opacity: .7; text-decoration: none; } .active { background-color: deepskyblue; width: 50px; color: white; padding: 10px; border-radius: 20px; } 

 <nav id="nav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div id="avatar"> <img src="nerdy-dog.jpg" alt="in a moment"></img> <p>John Samba</p> <p class="title">Web Developer</p> </div> <div class="brief"> <article> <h7 style="background-color:deepskyblue;padding:0 5px;">->Brief</h7> <span> <p >Based in <strong>Nairobi,Kenya</strong></p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam... </span> </article> </div> <div id="credits"> </div> <ul> <li><a class="active" href="index.html" style="text-decoration-line: underline; padding-top:50px;">All</a> </li> <li><a href="work.html">Projects</a></li> <li><a href="about.html">About me</a></li> <li><a href="link.html">Collaborate</a></li> <li><a href="hire.html">To Hire me</a></li> </ul> </nav>