пример нашел...пытался разобраться, вот что получилось:
<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 toggle = 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 == 'div1' | divElement == 'div2') {
if (divElement == 'div1') {
if (currentDiv == 'div1') {
close(currentDiv);
}
else if (currentDiv == 'div2') {
close(currentDiv);
open(divElement);
}
}
else if (divElement == 'div2') {
if (currentDiv == 'div2') {
close(currentDiv);
}
else if (currentDiv == 'div1') {
close(currentDiv);
open(divElement);
}
}
}
else if (divElement) {
// Если уже открыт этот div, то просто закрываем.
if (divElement === currentDiv) {
close(currentDiv);
// Если открыт другой div, то закрываем и открываем текущий:
} else if(currentDiv != null) {
close(currentDiv);
open(divElement);
// Иначе - просто открываем:
} else {
open(divElement);
}
}
}
// Вызываем нашу "обертку", теперь 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="toggle('div1')">Поле 1</h3>
<div class="myDiv" id="div1">
<table>
<tr>
<td></td>
<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="toggle('show_keys')">
<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="toggle('hide_file')">
<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="toggle('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>
Работает не совсем так как нужно, а именно: поля открываются, но вот если поле открыто, то при попытке изменить значение списка (при изменении должно либо появляться, либо нет, дополнительная строчка) поля закрываются. Как решить это - пока не ясно. Пытаюсь разделять события в зависимости от id, то есть когда id == "чему-то", то выполняется одно, когда этому не равно, то другое.