JavaScript show/hide для контента или блока ссылок

Начало Ссылка show/hide для контента или блока ссылок

................

Блок ссылок 1 (картинки)

Part 1

Part 2

Part 3

Part 4

Блок ссылок 2 (текстовые)

Категория 1:

Категория 2:

JavaScript show/hide для контента или блока ссылок

<style> .myViewLinks { display: none; } </style> <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> <a href="javascript://" onClick="toggle('div1');return false;">Блок ссылок 1 (картинки)</a> <div class="myViewLinks" id="div1"> <img src="bullet.gif"> Part 1<br /> <img src="bullet.gif"> Part 2<br /> <img src="bullet.gif"> Part 3<br /> <img src="bullet.gif"> Part 4<br /> </div> <br /> <a href="javascript://" onClick="toggle('div2');return false;">Блок ссылок 2 (текстовые)</a> <div class="myViewLinks" id="div2"> <strong>Категория 1:</strong> <ol> <li><a href="" >Part 1</a></li> <li><a href="" >Part 2</a></li> <li><a href="" >Part 3</a></li> <li><a href="" >Part 4</a></li> <li><a href="" >Part 5</a></li> </ol> <strong>Категория 2:</strong> <ol> <li><a href="" >Part 1</a></li> <li><a href="" >Part 2</a></li> <li><a href="" >Part 3</a></li> <li><a href="" >Part 4</a></li> <li><a href="" >Part 5</a></li> </ol> </div>