Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
show/hide для контента или блока ссылок
Блок ссылок 1 (картинки)
Part 1
Part 2
Part 3
Part 4
Part 2
Part 3
Part 4
Блок ссылок 2 (текстовые)
Исходный код этого примера:
<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="" 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="" 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>
.
Прокомментировать/Отблагодарить