Getting a div to appear with onclick addClass
<p>I am attempting to do an onclick event where the show class is added, however, I cannot get my <code>new-goal-container</code> to appear when 'Create new goal' is clicked. </p>

<p>I do not want this to be a toggle, simply an add class. As my code shows, I am trying to get this to do a quick fadeIn appearance with css. Is there a better approach to this, because now even though nothing is showing the div is still taking up space, which when the container is not visible, I want it to seem as if it doesn't exist.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#new-goal-button").click(function() {
  $("#new-goal-container").addClass("show");
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#new-goal-container {
  -webkit-opacity: 0;
  opacity: 0;
  margin-top: 30px;
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
}
.show {
  -webkit-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="new-goal-button"&gt;Create new goal&lt;/div&gt;
&lt;div id="new-goal-container"&gt;
  &lt;input type="text" placeholder="Goal Title"&gt;
  &lt;textarea placeholder="Goal Description"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>