<div class='login'>
<button class='login_btn'></button>
</div>
<div class='header'><button class='click'></div>
.header{
display: block;
height:200px;
width: 100%;
background-color: green;
}
.click{
margin: 20px 20px;
height:20px;
width: 20px;
}
.login{
display: none;
height:20px;
width: 100%;
background-color: red;
}
const btn = document.querySelector('.click');
const log = document.querySelector('.login');
btn.addEventListener('click', () => {
log.style.display = (log.style.display == 'none') ? 'block' : 'none'
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.