I'm pretty new to JavaScript (and coding in general) and I am trying to make image elements inside a div visible when something is clicked and then when that same thing is clicked again, the said elements should be hidden again.
I know I'm also not good at explaining so here is the code:
HTML:
<body class="background-dark">
<div class="popup" id="popupWindow">
<img onclick="openMenu()" src="img/add.png" id="add">
<div class="menu">
<div class="popup sizeM">
<h1>M</h1>
</div>
<div class="popup sizeL">
<h1>L</h1>
</div>
</div>
</div>
CSS:
.popup .sizeM,
.sizeL {
position: fixed;
width: 45px;
height: 45px;
font-family: 'Roboto', sans-serif;
background-color: rgba(128, 9, 250, 0.550);
color: white;
border: 1px #262626;
border-radius: 50%;
text-align: center;
left: auto;
right: auto;
margin-left: 17px;
}
.menu {
display: none;
}
Javascript
function openMenu() {
let pops = document.getElementById('add');
pops.addEventListener('click', openPops);
function openPops() {
document.querySelector('.menu').style.display = 'flex';
}
}
At the moment I am only able to make the elements M and L visible since they are invisible from display: none .
I tried something like
const check = false;
function openMenu() {
let pops = document.getElementById('add');
pops.addEventListener('click', openPops);
function openPops() {
if (!check) {
document.querySelector('.menu').style.display = 'flex';
check = true;
closePops(function() {
if (check = true) {
document.querySelector('.menu').style.display = 'none';
check = false;
}
});
}
}
}
And other similar ways of writing it and I can't seem to figure it out.