arjwolf arjwolf - 3 months ago 26
HTML Question

Show/Hide without reloading

I have 2 embeds I am displaying. The embeds have a link to a pdf:

<div id="thePdfContainer" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="thePdf">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="thePdf2">
</div>


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

<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>


I use the following functions to show and hide the embeds:

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


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 ?

Answer

Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.

<script> 
    function show(target) {
        document.getElementById(target).style.visibility = 'visible';
    }
    function hide(target) {
        document.getElementById(target).style.visibility = 'hidden';
    }
</script>