Hiding an Iframe by Default

Question

In one of the pages I need to have an iframe, but when the user loads the page I want it to be hidden by default. Right now I have a hide and show button to hide and show the iframe, but it is shown by default. How can I hide it by default?

Here's the code I have for the two buttons

<input type="button" value="Show Graph" onClick="$('graph').show();">
<input type="button" value="Hide Graph" onClick="$('graph').hide();">

Solution 1

Did you try to use CSS like this?

iframe {
   display:none;}

Though that depends if you want to have the area reserved too. With a sketch it would be easier to know.

You can hide on load with jQuery, too.

function(){$('graph').hide();}

Solution 2

Also - since you are already using jQuery you could just simply hide the iFrame on the page load like so:

<script type="text/javascript">
$(document).ready(function()
{
     $('#graph').hide();
});
</script>

Working demo : Demo

So you will need to make sure of the following changes:

Iframe :

Add id="graph" to your iframe.

onClick Events:

Add onClick="$('#graph').show();" and onClick="$('#graph').hide();" respectively

Comments

[Reti]

I still want to be able to show/hide it, I just want to hide it be default. Would this work for that?

[Reti]

I've tried adding this inside the head tag and right above the graph, but it's not working. I reload the page and it still shows up.

[Reti]

The iframe's id is "graph", but even if I change it to #graph, it still doesn't work.

[Rion Williams]

It seems I had left out the <script> tags, is the demo working for you?

[Reti]

The demo works for me, but it doesn't work in my application... weird.

[Rion Williams]

Did you try wrapping the code in the <script> tags? Also - you will need to ensure that the id of your iframe = "graph", and make sure to add the #graph instead of graph in your button onClick events

[Reti]

When change the onclick to #graph, it stops working, even though the id='graph', and even though I put what you told me to for hiding by default, it doesn't work (even if I try graph instead of #graph). It's confusing as to why it doesn't work...

[Rion Williams]

That's bizarre. So you have your iframe with id="graph", and both of your onClick methods look like this : $('#graph').show() and $('#graph').hide() ? If this isn't working you might want to put a larger example so we can troubleshoot it.

[james.garriss]

@Reti - Yes, using the display property would hide all the iframes on the page when the page loads.