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>