Show/Hide without reloading
<p>I have 2 embeds I am displaying. The embeds have a link to a pdf:</p>

<pre><code>&lt;div id="container" class="text-center"&gt;           
    &lt;embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1"&gt;
    &lt;embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2"&gt;
&lt;/div&gt;
</code></pre>

<p>I also have 2 buttons, one to show the embed and another to hide the embed. Like this:</p>

<pre><code>&lt;div class="button"&gt;
    &lt;button class="btn-info" onclick="hide('thePdf2')" type="button"&gt;HIDE&lt;/button&gt;
&lt;/div&gt;
&lt;div class="button"&gt;
    &lt;button class="btn-info" onclick="show('thePdf2')" type="button"&gt;SHOW&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>I use the following functions to show and hide the embeds:</p>

<pre><code>&lt;script&gt; 
    function show(target) {
        document.getElementById(target).style.display = 'block';
    }
    function hide(target) {
        document.getElementById(target).style.display = 'none';
    }
&lt;/script&gt;
</code></pre>

<p>My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?</p>