hello. ho scritto uno script che, chiaramente, non funziona. Eccolo (breve spiegazione: una ancora di pagina richiama la funzione change() che a sua volta, ulla base di alcune rilevazioni che essa stessa compie, richiama alternativamente la funzione stringi() o la funzione allarga()):
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled Page</title>

<script type="text/javascript">

	function stringi(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.style.width;
		var larg2 = colonna2.style.width;
		var larg_c = corpo.style.width;
				
				
		// per fermare la funzione di restringimento
		if(larg1 = larg2 == "0"){
			window.clearInterval(x);
			colonna1.style.width = colonna2.style.width = "none";
			}
					
			colonna1.style.width = colonna2.style.width = (parseInt(larg1) - 1) + 'px';
			corpo.style.width = (parseInt(larg_c) + 2) + 'px';
		}
		
		
	function allarga(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.style.width;
		var larg2 = colonna2.style.width;
		var larg_c = corpo.style.width;
				
				
		// per fermare la funzione di allargamento
		if(larg1 = larg2 == "0px"){
			window.clearInterval(x);
			colonna1.style.width = colonna2.style.width = "none";
			}
					
			colonna1.style.width = colonna2.style.width = (parseInt(larg1) + 1) + 'px';
			corpo.style.width = (parseInt(larg_c) - 2) + 'px';
		}


	function change(){
		var colonna1 = document.getElementById("colonna1");
		  
        if(colonna1.style.display == 'none') {
			x = window.setInterval("allarga()", 10);
			}
			          
		else {
			x = window.setInterval("stringi()", 10);
			}
		}
				
</script>

<style type="text/css">
body {margin: 0px; padding: 0px;}

#overhead {width: 100%; background: #000; padding: 5px 0px; font-weight: bold;}

#overhead, #overhead a {color: #fff;}

#header {width: 100%; color: red; font-size: 80px; background: #CCCCCC;}

.colonna1 {float: left; width: 200px; height: 400px; background: yellow; padding: 10px;}

.corpo {float: left; width: 400px; height: 400px; background: #CBF5E0; padding: 10px;}

.colonna2 {float: left; width: 200px; height: 400px; background: pink; padding: 10px;}

h3 {margin: 0px; padding: 0px;}

#footer {clear: both; width: 100%; background: #00FF00;}
</style>

</head>
<body>

 

<div id="overhead">show/hide columns << ecco il controllo del javascript </div>

<div id="header">Javascript &amp; CSS</div>

<div id="container">

<div id="colonna1" class="colonna1"><h3>ciao world! this is the left column</h3></div>

<div id="corpo" class="corpo">this is the main column!!!!!! you know ... the one conveying the most important information in the website.</div>

<div id="colonna2" class="colonna2"><h3>ciao world! this is the right column</h3></div>

</div>

<div id="footer">And this is the footer. All right reserved</div>

</body>
</html>