How do I make an element invisible?

At the request of a friend I am throwing together a quick web page. It is basically a portal to access a few sites at once. I don't know much javascript at all so I am hoping someone could lend some advice.

At the top is a link bar to all the websites that I place there. There will then be a large iframe below it, displaying the website, so that when the link at the top is clicked it changes the website. I was thinking that I could just get the links at the top to change the source of the iframe via javascript, however I realised that when you click back onto the original site, any form data or input via AJAX would be gone (I am assuming this, haven't tested). Does anyone know how to get around this so that I could bring back up the iframe with the website just as it was left. One idea is to somehow make the iframe invisible and then display it again when the link is clicked. My only other thought is to get something going ebuddy style, with the minimisation of windows down to a task bar at the bottom of the page, although I am totally clueless as to how I should do this. Does anyone have any suggestions?

Sorry if I have confused you, I just find it hard to describe what I want to do in a simpler way.

 

sure you can. it would go something like:

<div id="showContainer" data-id="pageContainer" style="width: 120px; padding: 2px; border: 1px solid #000;">
toggle display off
</div>
<div id="pageContainer" style="display: block; border: 1px solid #000; width: 500px; height: 300px;">
<inframe ... ></iframe>
foo
</div>

<script type="text/javascript">
var toggleElement = function(what) {
    // hides or shows an element dependent on current state
    // as a param, send the id (not object) of the element
    var targetElement = document.getElementById(what);
    targetElement.style.display = (targetElement.style.display == "none") ? "block" : "none"; // block or inline whatever css you need
    return targetElement.style.display;
} // end toggleElement


// set an on-click event for some button that will act as a trigger
document.getElementById("showContainer").onclick = function() {
    // also change button text according to the element state
    this.innerHTML = (toggleElement(this.getAttribute("data-id")) == "none") ? "toggle display on" : "toggle display off";
}
</script>

HTML:

look at this in action here: _http://fragged.org/elements.html

wrote it to support unlimited elements and togglers, all you need to do is take
<div id="showContainer" data-id="pageContainer" style="width: 120px; padding: 2px; border: 1px solid #000;">, change the data-id= to some other container, change the id and add a new event for it, and you can have more and more tabs this way

the target elements can be fully css'd so they can be absolutely positioned and you can stack them on top of each other so you will effectively get tabs.

 

Thanks for the code dimitar. I have just spent the last half hour consulting my javascript guide to no avail, but this looks really good, some rep coming your way.

I have found the section in my javascript book that contains everything I want for this style of work, so I should be alright. Thanks again for the help.

 

iFrames are generally very bad use now.

Use AJAX, PHP includes or a templating system instead.