Show or Hide IFrame in asp.net page using javascript
In this Code Snippet we are going to see how to show or hide an IFrame content in asp.net web page using javascript code. Here we are showing the IFrame in a div tag. Initially the div tag is not displaying by setting its display property to none. on button click if the div tag is invisible, we are making it visible by setting its display property to block and Visibility property to visible.
In this Code Snippet we are going to see how to show or hide an IFrame content in asp.net web page using javascript code.
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="var id = document.getElementById('test'); if(id.style.display == 'block'){ id.style.display = 'none'; id.style.visibility = 'hidden';} else{ id.style.display = 'block'; id.style.visibility = 'visible';}" value="Show/Hide" />
<div style="display:none;" id="test" name="test">
<iframe id="test" runat="server" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.EXAMPLE.com%2F&layout=button_count&show_faces=true&width=100&action=recommend&colorscheme=light&;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
</form>
</body>
In the above code we are showing the IFrame in a div tag. Initially the div tag is not displayed by setting its display property to none. on button click if the div tag is invisible, we are making it visible by setting its display property to block and Visibility property to visible.
When the IFrame(through div tag) is visible, On button click we are hiding it by setting the display property of the div tag to block.
Follow