<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'  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.