AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

Блок ссылок 1 (картинки)
Блок ссылок 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="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>


. Полимерные эластичные мягкие резервуары skyprom.ru.

© Copyright 2008-2016 by KDG