Пропадает слой

[MiXOH]

Привет всем!

Задача: мне нужно сделать сдвиг слоев, т.е. пользователю задается вопрос, и предлагаются варианты ответов. При выборе ответа, появляется следующий вопрос с вариантами ответа. Все вопросы находятся в div-ах, и естественно не видны пока пользователь не выберет ответ. Также они сдвинуты в виде лестницы, т.е. следующий появляется правее предыдущего. Организовал это так <div id="div1" style="display: none;position:relative;left:5%;z-index:1">.

Проблема: при попытке раскрыть все ответы, некоторые из предыдущих пропадают (становяться не видны).

Подскажите, пожалуйста, решение проблемы или другой способ решения задачи.

 

[MiXOH]

После танцев с бубном, была найдена суть ошибки.
Оказывается со слоями все нормально, проблема с таблицами.
При раскрытии пропадают не слои а таблицы с данными. Таблицы нужны для того, чтобы данные оставались на странице, т.к. при сдвиге слоя, часть его выходит за границы страницы и становиться не видна пользователю.

Вот код для примера:

	<script>
function show(toShow) {
var t_show = document.getElementById(toShow);
if(t_show.style.display=="none") t_show.style.display = "";
else t_show.style.display="none";
}
</script>

<a href="java script:show('div1')"><b>div1</b></a> <br>
<div id="div1" style="display:none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div1<br>
<a href="java script:show('div2')"><b>div2</b></a> <br>
<div id="div2" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div2<br>
<a href="java script:show('div3')"><b>div3</b></a> <br> 
<div id="div3" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div3<br>
</td></tr>
</table>
</div>
<a href="java script:show('div4')"><b>div4</b></a> 
<div id="div4" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div4<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
<a href="java script:show('div5')"><b>div5</b></a>
<div id="div5" style="display: none;position:relative;left:5%;z-index:1">	
<table width="95%" border="1">
<tr><td>
div5<br>
<a href="java script:show('div6')"><b>div6</b></a> <br>
<div id="div6" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div6<br>
</td></tr>
</table>
</div>
<a href="java script:show('div7')"><b>div7</b></a> 
<div id="div7" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div7<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
<br><br>
</td></tr>
</table>
</div>
<a href="java script:show('div8')"><b>div8</b></a> <br>
<div id="div8" style="display:none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
<a href="java script:show('div9')"><b>div9</b></a>
<div id="div9" style="display: none;position:relative;left:5%;z-index:1">	
<table width="95%" border="1">
<tr><td>
div9<br>
<a href="java script:show('div10')"><b>div10</b></a> <br>
<div id="div10" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div10<br>
</td></tr>
</table>
</div>
<a href="java script:show('div11')"><b>div11</b></a> 
<div id="div11" style="display: none;position:relative;left:5%;z-index:1">
<table width="95%" border="1">
<tr><td>
div11<br>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div><br>
<a href="java script:show('div12')"><b>div12</b></a>
<div id="div12" style="display: none;position:relative;left:5%;z-index:1">	
<table width="95%" border="1">
<tr><td>
div12<br>
</td></tr>
</table>
</div>		
<br>
</td></tr>
</table>
</div>
<br>

 

[MiXOH]

z-index:1 это для другой части скрипта, в этом примере кода можно опустить (лень было удалять).
Проблема в том, что пропадает информация, пропадает в смысле перестает отбражаться.
Если, Вы, создадите страничку и вставите туда код из примера, и попробуете раскрыть все div-ы, то, Вы, увидите, что некоторая информация будет исчезать, а должна отображаться. В этом и суть проблемы.

 

[MiXOH]

Для: sax_ol
Большое спасибо!!!

Ваш ответ натолкнул меня на мысль и я решил проблему.
Насамом деле, ничего убирать не надо (если убрать, то дивы не будут распологаться в виде лестницы, а будут идти просто друг под другом).
Надо наоборот, добавит в свойства таблицы style="position:relative;", и после этого все работает как надо.

 

[MiXOH]

Для: sax_ol
Таблицы нужны! Т.к. див смещается в лево и если в нем много информации то она выходит за правую границу экрана, а скролинг горизонтальный НЕ ПОЯВЛЯЕТСЯ. Поэтому, при использовании таблицы внутри дива с width = (100% - (смещение дива)) информация распологается на странице (получается, что правая граница таблицы проходит по правой границе окна).