How to reverse effect of a JS action using an IF ELSE statement using Global variable?

Creating a very basic IF ELSE statement in JavaScript to create a clickable overlay on a DIV. The open action works however close does not.

Using the onClick function to select the div, with the idea a var will tell it whether to run the function or not.

<div onclick="myFunction()" class="outer">

<div class="inner" id="overlay">
  <h1>Title</h1>
  <p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry'sstrong text standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
</div>

.outer {
position: relative;
width: 25rem; 
height: 15rem;
border-radius: 1em;
background-image: url("https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg");
background-position: center;
background-size: cover;
box-shadow: 0px 0px 10px #888888;
  overflow: hidden;
}
  
.inner {
position: absolute; 
bottom: 0; 
width: 100%;
height: 5rem; 
background-color: rgba(0,0,0,0.7);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
transition: 0.5s;
}
.inner > * {
  color: white;
  padding: 1rem;
}

function myFunction() {

  var overlay = false;
  
 if(overlay == false) { document.getElementById("overlay").style.height = "100%";
overlay = true;
}
else
{document.getElementById("overlay").style.height = "20%";
overlay = false;}
}