Ошибка в таблице не столь существенна...но тем не менее...
Сейчас сделал все следующим образом:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
// Обворачиваем функцию toggle в локальное замыкание:
var toggleA = function() {
// Ссылка на текущий открытый div:
var currentDiv = null;
// Функция для "раскрытия" элемента:
function open(divElement) {
// Тут можно добавить эффект "плавного" открытия:
divElement.style.display = "block";
currentDiv = divElement;
}
// Функция для "закрытия" элемента:
function close(divElement) {
// Тут можно добавить эффект "плавного" закрытия:
divElement.style.display = "none";
currentDiv = null;
}
// Возвращаем функцию, которая будет вызываться по toggle()
return function(divID) {
// Получаем элемент из DOM
var divElement = document.getElementById(divID);
// Если такой есть:
if (divElement) {
// Если уже открыт этот div, то просто закрываем.
if (divElement === currentDiv) {
close(currentDiv);
// Если открыт другой div, то закрываем и открываем текущий:
} else if(currentDiv != null) {
close(currentDiv);
open(divElement);
// Иначе - просто открываем:
} else {
open(divElement);
}
}
}
// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
}();
// Обворачиваем функцию toggle в локальное замыкание:
var toggleB = function() {
// Ссылка на текущий открытый div:
var currentDiv = null;
// Функция для "раскрытия" элемента:
function open(divElement) {
// Тут можно добавить эффект "плавного" открытия:
divElement.style.display = "block";
currentDiv = divElement;
}
// Функция для "закрытия" элемента:
function close(divElement) {
// Тут можно добавить эффект "плавного" закрытия:
divElement.style.display = "none";
currentDiv = null;
}
// Возвращаем функцию, которая будет вызываться по toggle()
return function(divID) {
// Получаем элемент из DOM
var divElement = document.getElementById(divID);
var cpl = document.getElementById('cpl');
var zpl = document.getElementById('zpl');
if (divElement) {
if (cpl.value == "keys") {
open(divElement);
}
else if (zpl.value == "file") {
open(divElement);
}
else if (cpl.value == "keys" && currentDiv != null) {
open(divElement);
}
else if (zpl.value == "file" && currentDiv != null) {
open(divElement);
}
else if (zpl.value == "gen" && currentDiv != null) {
close(divElement);
}
else if (zpl.value == "users" && currentDiv != null) {
close(divElement);
}
else if (cpl.value == "gen" && currentDiv != null) {
close(divElement);
}
else if (cpl.value == "users" && currentDiv != null) {
close(divElement);
}
else {
close(currentDiv);
}
}
}
// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
}();
</script>
<style>
h3.pol {
margin: 0;
border: 1px solid #ccc;
padding: 4px;
background-color: #EBEBEB;
margin-bottom: 1px;
font-size: 12px;
color: #666;
cursor: pointer;
}
.myDiv {
display: none
}
</style>
</head>
<body>
<h3 class="pol" title="Поле 1" onclick="toggleA('div1')">Поле 1</h3>
<div class="myDiv" id="div1">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<label>
Форма 1
</label>
<br/>
<select size="1">
<option value="gen" selected="true">Ген</option>
<option value="keys" >Кеи</option>
<option value="users" >Юзер</option>
</select>
</td>
<td>
<em>
Описание
</em>
</td>
</tr>
<tr>
<td colspan="2">
<label>
Форма 2
</label>
<br/>
<select onChange="toggleB('show_keys')" id="cpl">
<option value="gen" selected="true">Ген</option>
<option value="keys" >Если выбрать, то появиться поле</option>
<option value="users" >Юзер</option>
</select>
</td>
<td>
<em>
Описание
</em>
</td>
</tr>
<tr class="myDiv" id="show_keys">
<td colspan="2">
<label>
Появляющееся поле
</label>
<br />
<textarea rows="15" cols="30"></textarea>
</td>
<td>
<em>
Введите в данное поле слова
</em>
</td>
</tr>
<tr>
<td colspan="2">
<label>
Форма 3
</label>
<br/>
<select onchange="toggleB('hide_file')" id="zpl">
<option value="gen" selected="true">Генерация</option>
<option value="file" >Взять из файла</option>
<option value="users" >Юзер</option>
</select>
</td>
<td>
<em>
Описание
</em>
</td>
</tr>
<tr class="myDiv" id="hide_file">
<td colspan="2">
<label>
Файл с текстом
</label>
<br />
<input type="file">
</td>
<td>
<em>
Выберите файл с текстом для контента страни
</em>
</td>
</tr>
</table>
<br />
</div>
<h3 class="pol" title="Поле 2" onclick="toggleA('div2')">Поле 2</h3>
<div class="myDiv" id="div2">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<label>
Удалить
</label>
</td>
<td></td>
</tr>
<tr>
<td>
<input type="radio" checked="checked"/>
</td>
<td>
<label>
Создавать
</label>
</td>
<td>
<em>
Просто
</em>
</td>
</tr>
<tr>
<td colspan="2">
<label>
Форма
</label>
<br/>
<input type="text" />
</td>
<td>
<em>
Введите текст
</em>
</td>
</tr>
</table>
</div>
</body>
</html>
Поля открываются и закрываются с помощью одной функции, а вкладки с помощью другой. Но тут возникла еще одна проблема: я пытаюсь различать выбранное значение по 'value' но вот как все правильно сделать - пока не могу догадаться ... возникает конфликт, т.е. если выбрать одно поле, при выборе которого возникает доп.строчка, то при выборе другого поля значение роли не играет, т.к. уже выполняется одно событие (к примеру: cpl.value == "keys") .. как это правильно решить - пока думаю. Если у кого-то есть идеи, то с удовольствием выслушаю )
А вообще интересует более логичный метод, а именно: как возможно использовать одну функцию и для полей и для вложенных списков, чтоб ничего не конфликтовало (выбрал одно, а другое закрылось...или вообще все)..