<h1>Show and Hide an HTML Element</h1>
<h2>Using CSS and Vanilla JS to toggle a class</h2>
  <p>You can show and hide anything with some simple CSS and Javascript. All you need is some simple Javascript that will toggle (add or remove) a class (e.g. "active") on an HTML element when the user clicks on something. Use CSS to show/hide the element and even animate it. No need to search the web for existing code samples or snippets, you can (and should be able to) write this from scracth. It's super, super simple once you grasp the concept and syntax.</p>
<a href="#" class="button mytogglebutton">Toggle Button</a>
<div class="myhiddenthing">
  <h1>This is My Hidden Div</h1>
  <p>You can put whatever you want in here. For example, this can be a side drawer nav, an overlay, or an accordian. The possibilities are many. The code is simple, yet powerful.</p>
  <p>If you need a close button, you can add one and make it work using similar Javascript.</p>
    <a href="#" class="button myclosebutton">Close Button</a>
</div>
/* Buttons */
.button {
  display: inline-block;
  padding: 1em 1.5em;
  margin-bottom: 1em;
  background: #000;
  color: #fff;
  border-radius: .5em;
  text-decoration: none;
}
p { max-width: 30em; }

/* Hidden Thing */
.myhiddenthing {
  background: red;
  color: #fff;
  position: absolute;
  top: -100vh;
  height: 100vh;
  /*width: 100vw;*/
  right: 0;
  box-sizing: border-box;
  padding: 0 2em;
  transition: all .4s ease-in;
  opacity: 0;
}
.myhiddenthing.active {
  position: absolute;
  top: 0;
  opacity: 1;
}
document.addEventListener('DOMContentLoaded', function() {
  
  // MY HIDDEN THING
  var myhiddenthing = document.querySelector('.myhiddenthing');

  // MY TOGGLE BUTTON - BY ADDING/REMOVING A CLASS
  var mytogglebutton = document.querySelector('.mytogglebutton');
  mytogglebutton.onclick = function() {
    myhiddenthing.classList.toggle('active');
  };
  
  // MY CLOSE BUTTON - BY REMOVING A CLASS
  var myclosebutton = document.querySelector('.myclosebutton');
  myclosebutton.onclick = function() {
    myhiddenthing.classList.remove('active');
  };
    
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.