trying to build a collapsible sidebar , contents of the sidebar not collapsing with it-CodePudding

so i tried building a collapsible sidebar , the sidebar collapses when clicked on button but the contents of it do not get collapsed. When i click on the open menu button it opens the side bar but when i click that button to close it again the content of sidebar that is "hi" written in h1 tag does not disappear. please help.

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar practice</title>
    <link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
    <div  id="sidenav">
        
    <h1>hi</h1>
         
    </div>
    <div  id="topnav">
        <button onclick="openNav()">
           open menu
        </button> 
    </div>

    <div id="main">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
            Voluptates aliquam, nihil ab fugiat temporibus maxime nulla 
            pariatur, sapiente porro blanditiis ipsam eos, labore magnam 
            dolore et incidunt voluptatem inventore. Possimus?
        </p>
    </div>

    <script>
        var checked = 0;
        function openNav() {
        if(checked == 0){
        document.getElementById("sidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.getElementById("topnav").style.marginLeft = "250px";
        checked = 1;
        }
        else{
        document.getElementById("sidenav").style.width = "0";
        document.getElementById("main").style.marginLeft= "0";
        document.getElementById("topnav").style.marginLeft = "0";
        checked = 0;
        }    
    }
        
       
        </script>
</body>
</html>


'''



 

    
        body {
            margin: 0;
        }
    
    
        #topnav {
            background-color: #333;
            overflow: hidden;
          padding: 40px 16px;
          transition: 0.5s;
          }
    
    
        #image1 {
              height: 25px;
              width: 25px;
          }
    
        #image2 {
            height: 25px;
            width: 25px;
        }  
    
    
        #sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #333;   
            padding-top: 20px;
            transition: 0.5s;
          }

    button {
        background-color: #333;
    }

    #main {
        transition: margin-left .5s;
        }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sidebar practice</title>
        <link rel="stylesheet" href="css/sidebar.css">
    </head>
    <body>
        <div  id="sidenav">
            
        <h1>hi</h1>
             
        </div>
        <div  id="topnav">
            <button onclick="openNav()">
               open menu
            </button> 
        </div>

        <div id="main">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Voluptates aliquam, nihil ab fugiat temporibus maxime nulla 
                pariatur, sapiente porro blanditiis ipsam eos, labore magnam 
                dolore et incidunt voluptatem inventore. Possimus?
            </p>
        </div>

        <script>
            var checked = 0;
            function openNav() {
            if(checked == 0){
            document.getElementById("sidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.getElementById("topnav").style.marginLeft = "250px";
            checked = 1;
            }
            else{
            document.getElementById("sidenav").style.width = "0";
            document.getElementById("main").style.marginLeft= "0";
            document.getElementById("topnav").style.marginLeft = "0";
            checked = 0;
            }    
        }
            
           
            </script>
    </body>
    </html>

CodePudding user response：

Add overflow:hidden to your css in #sidenav

#sidenav {
  overflow:hidden;
}

CodePudding user response：

just add this function

function openNav() {
            if(checked == 0){
            document.getElementById("sidenav").style.display = "block";
            checked = 1;
            }
            else{
            document.getElementById("sidenav").style.display = "none";
            checked = 0;
            }    
        }