Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

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="" 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>


.