0

I'm an absolute beginner in javascript I want to open and close the burger menu. I don't know why it doesn't work with me. When I write .open{display:block} it shows up and I can't even open or close the burger menu how I can fix this and why it shows up like this ? here the code:

let btn = document.getElementById('btn-js');
let sidebar = document.getElementById('side-bar');

btn.addEventListener('click',show());

function show(){
    sidebar.classList.toggle('open');
}
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    list-style: none;
}


.side-bar{
    display: none;
    background: cornflowerblue;
    width: 275px;
    text-align: center;
    font-size: 19px;
    

}

.side-links{
    padding: 30px 0;
}

.side-links li{
    padding: 30px 0;
}


@media all and (max-width:800px) {

    .open{
        display: block;
    }
}
    <!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">
    <link rel="stylesheet" href="css.css">

    <title>Document</title>
</head>
<body>
    
    <button id="btn-js" class="btn-css">open</button>
    <div class="side-bar" id="side-bar">
       
        <ul class="side-links">
            <li>home</li>
            <li>about</li>
            <li>contact</li>
            <li>acount</li>
        </ul>
    </div>


    <script src="js.js"></script>
</body>
</html>

0 Answers0