title: Hide Show Toggle Button Image
body: <p>So I'm relatively new to coding and I've been trying to put a toggle button to hide/show an image. However, I'd like it to start out as hidden and then show after the click rather than its current state of showing first. </p>
  
  <p>I tried using <code>visibility="hidden"</code> but that just made the image a blank space that was still "showing". If anyone could help me out/help me rework my code, it would be greatly appreciated!</p>
  
  <p>here's what I've been working with:</p>
  
  <pre><code>&lt;button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();"&gt;view&lt;/button&gt;
  &lt;div id="imgname"&gt;
      &lt;img class="img-responsive" src="images/imgsource"&gt;
  &lt;/div&gt;
  </code></pre>