Хорошо. Вот небольшая часть то что связана со скриптом:
<script>
// Обворачиваем функцию 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) {
// Если уже открыт этот div, то просто закрываем.
if (divElement === currentDiv) {
close(currentDiv);
// Если открыт другой div, то закрываем и открываем текущий:
} else if(currentDiv != null) {
close(currentDiv);
open(divElement);
// Иначе - просто открываем:
} else {
open(divElement);
}
}
}
// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
}();
</script>
<style>
.myViewLinks {
display: none;
}
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><noscript><strong>To view links in this part requires JavaScript!</strong></noscript></td>
</tr>
<tr>
<td> <a href="javascript://" onClick="toggle('div1')">LINKS 1</a>
<div class="myViewLinks" id="div1">
<img src="08w1.jpg" width="100" height="200"><br />
<img src="08w2.jpg" width="100" height="200"><br />
<img src="08w3.jpg" width="100" height="200"><br />
<img src="08w4.jpg" width="100" height="200"><br />
</div>
<br />
<a href="javascript://" onClick="toggle('div2')">links 2</a>
<div class="myViewLinks" id="div2">
<strong>QWERTY 1:</strong>
<ol>
<li><a href="http://google.com/" >Part 1</a></li>
<li><a href="http://google.com/" >Part 2</a></li>
<li><a href="http://google.com/" >Part 3</a></li>
<li><a href="http://google.com/" >Part 4</a></li>
<li><a href="http://google.com/" >Part 5</a></li>
</ol>
<strong>QWERTY 2:</strong>
<ol>
<li><a href="http://yahoo.com/" >Part 1</a></li>
<li><a href="http://yahoo.com/" >Part 2</a></li>
<li><a href="http://yahoo.com/" >Part 3</a></li>
<li><a href="http://yahoo.com/" >Part 4</a></li>
<li><a href="http://yahoo.com/" >Part 5</a></li>
</ol>
</div> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
