Не могу разобраться до конца с задачей JS+CSS :(

Задача не так сложна на первый взгляд... Помогите плиз разобраться, постараюсь объяснить подробно...

Во-первых есть сайт http://amcbridge.com/expertise/business.php

На нем слой растягивается всегда до определенного отступа снизу.

Я взял оттуда код

function resizeBox(){

	if (document.getElementById) {

		o=document.getElementById("text_block"); h=0;

		if (document.body.clientHeight) h=document.body.clientHeight;

		if (document.innerHeight) h=document.innerHeight;

		if (o&&h) {

			if (h<426) h=426;

			o.style.height=(h-138)+'px';

		}

		hx=o.offsetHeight;

		o=document.getElementById("text_box");

		if (o&&h&&hx) {

			if (hx<(h-86)){

				o.style.height=(h-138-86)+'px';

                t=document.getElementById("prod1");

                if (t&&hx) t.style.height=(hx-47)+'px';

                // window.alert('h='+h+' hx='+hx+' t.style.height='+t.style.height);

                }

			else

				o.style.height=(o.offsetHeight)+'px';

	    }

	}

}

onload=resizeBox;

onresize=resizeBox;

И, соответственно, смог сделать так же.

Но мне нужно, чтобы было несколько таких слоев. Например три. И каждый из них показывается при нажатии на ссылку, остальные скрываются.

Выглядит это так: три свитка, друг над другом. Нажимаешь на верхний - из него вниз раскрывается слой, который прижимает два других свитка к нижней части. Нажимаешь на средний - он прижимает нижний вниз, а верхный вверху остается. И так далее.

Для скрытия - открытия есть такой код:

function show_div(div_id) {

// скрывает все div`ы

document.getElementById('the_div_1').style.display = 'none';

document.getElementById('the_div_2').style.display = 'none';

document.getElementById('the_div_3').style.display = 'none';



// показывает требуемый div

document.getElementById(div_id).style.display = 'block';

}

Но как все это использовать для моей задачи? Как лучше сделать?