How to use links within a show/hide div
<p>I have some css lines that allow me to hide/show a div. I would like to have links in this div, but when I test the link, it ends up hiding the div, it does not actually follow the link.<br>
So, I want to be able to show the content, click the link. The content should remain open, and the link should be followed. Hope this makes sense!</p>

<pre><code>&lt;p&gt;some text I want to show&lt;/p&gt;
    &lt;a href="#" class="hide"&gt;[...]&lt;/a&gt;
    &lt;a href="#" class="show"&gt;[...]&lt;/a&gt;
    &lt;div id="list"&gt;
      &lt;p&gt;bla bla, you should look on &lt;a href="http://www.google.com"&gt;google&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>.show {
  display: none;
}

#list {
  display: none;
}

.hide:focus + .show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus ~ #list {
  display: block;
}
</code></pre>

<p>I also made my first <a href="https://jsfiddle.net/vanni82/3cn7yvds/" rel="nofollow" title="fiddle">fiddle</a>.</p>

<p>As always, any help is appreciated!</p>