CODEWITHSUNDEEP
jqueryiframehideshow
Mac Luc
Mac Luc

Reputation: 1001

jQuery iframe hide/show

Well im coding a site, and now stuck at the jQuery part, which aint my strongest thing. The site contains a top-menu nav-bar:

<a href="aboutus.html" target="iframe"><img class="tab1" src="#.png"></a>
<a href="menu.html" target="iframe"><img class="tab2" src="#.png"></a>
<a href="gallery.html" target="iframe"><img class="tab3" src="#.png"></a>
<a href="shop.html" target="iframe"><img class="tab5" src="#.png"></a>
<a href="links.html" target="iframe"><img class="tab6" src="#.png"></a>
<a href="contact.html" target="iframe"><img class="tab7" src="#.png"></a>
</div>

And a iframe in the middle of the page, which loads the new html on nav click. When the index page loads, the iframe should not be seen before nav click. So ive got: iframe {display:none;} in css.

So, i need help with jQuery coding to show the iframe on nav click. Also with an effect to make the iframe hide again.

All the best.

Upvotes: 0

Views: 32219

Answers (3)

Tony Dinh
Tony Dinh

Reputation: 6726

The jQuery toggle method would be helpful.

Upvotes: -2

Aymen Taarit
Aymen Taarit

Reputation: 672

I think if you try to use a div and use the .load() method it will be better than the use of an iframe

$("a").click(function(){
$("#mydiv").load($(this).attr("href"));
});

Upvotes: 0

SAK
SAK

Reputation: 470

Assuming that the <iframe> has an id of contentIframe you could do the following:

Show the <iframe>:

$("#contentIframe").show();

Hide the <iframe>:

$("#contentIframe").hide();

Upvotes: 3

Related Questions