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>

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.

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

Show the <iframe>:


Hide the <iframe>: