CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 294   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

65

Раскрывающиеся блоки (div) на JavaScript

Jemand 61143 ,
JavaScript

Замечательные горизонтальные раскрывающиеся блоки. Применять можно где угодно и для чего угодно.
1. CSS

#slider {
	width: 508px;
	color: #fff;
	font-family: Georgia;
	font-size: 14px;
	}
.header {
	width: 488px;
	border: 2px solid #3F3F3F;
	padding: 8px;
	font-weight: bold;
	margin-top: 5px;
	cursor: pointer;
	background: url(images/header.png);
	text-align: center;
	}
.header:hover {
	background: url(images/header_over.png);
	color: #B7B7B7;
	}
.content {
	overflow: hidden;
	}
.text {
	width: 474px;
	border: 2px solid #3F3F3F;
	border-top: none;
	padding: 15px;
	text-align: left;
	background: #7F7F7F;
	}

2. JavaScript
Данный код вставляем перед закрывающим тегом </head>.

<script type="text/javascript">
var array = new Array();
var speed = 10;
var timer = 10;

// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst) {
  var slider = document.getElementById(target);
  var divs = slider.getElementsByTagName('div');
  var divslength = divs.length;
  for(i = 0; i < divslength; i++) {
    var div = divs[i];
    var divid = div.id;
    if(divid.indexOf("header") != -1) {
      div.onclick = new Function("processClick(this)");
    } else if(divid.indexOf("content") != -1) {
      var section = divid.replace('-content','');
      array.push(section);
      div.maxh = div.offsetHeight;
      if(showfirst == 1 && i == 1) {
        div.style.display = 'block';
      } else {
        div.style.display = 'none';
      }
    }
  }
}

// Process the click - expand the selected content and collapse the others //
function processClick(div) {
  var catlength = array.length;
  for(i = 0; i < catlength; i++) {
    var section = array[i];
    var head = document.getElementById(section + '-header');
    var cont = section + '-content';
    var contdiv = document.getElementById(cont);
    clearInterval(contdiv.timer);
    if(head == div && contdiv.style.display == 'none') {
      contdiv.style.height = '0px';
      contdiv.style.display = 'block';
      initSlide(cont,1);
    } else if(contdiv.style.display == 'block') {
      initSlide(cont,-1);
    }
  }
}

// Setup the variables and call the slide function //
function initSlide(id,dir) {
  var cont = document.getElementById(id);
  var maxh = cont.maxh;
  cont.direction = dir;
  cont.timer = setInterval("slide('" + id + "')", timer);
}

// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
  var cont = document.getElementById(id);
  var maxh = cont.maxh;
  var currheight = cont.offsetHeight;
  var dist;
  if(cont.direction == 1) {
    dist = (Math.round((maxh - currheight) / speed));
  } else {
    dist = (Math.round(currheight / speed));
  }
  if(dist <= 1) {
    dist = 1;
  }
  cont.style.height = currheight + (dist * cont.direction) + 'px';
  cont.style.opacity = currheight / cont.maxh;
  cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
  if(currheight < 2 && cont.direction != 1) {
    cont.style.display = 'none';
    clearInterval(cont.timer);
  } else if(currheight > (maxh - 2) && cont.direction == 1) {
    clearInterval(cont.timer);
  }
}
</script>

2.1 Подключение JavaScript
В тег <body> добавляем onload=”slider(‘slider’,0)” получая следующее:

<body onload="slider('slider',0)">

Это необходимо для того, чтобы вся конструкция заработала так, как надо.
3. HTML

<div id="slider">
	<div class="header" id="1-header">Первый блок</div>
	<div class="content" id="1-content">
		<div class="text">
			Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
		</div>
	</div>
	<div class="header" id="2-header">Второй блок</div>
	<div class="content" id="2-content">
		<div class="text">
			Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
		</div>
	</div>
	<div class="header" id="3-header">Третий блок</div>
	<div class="content" id="3-content">
		<div class="text">
			Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
		</div>
	</div>
</div>

P.S.
В приведенном выше коде используется лишь три выпадающих блока, но их можно сделать любое количество, для этого нужно взять код блока:

<div class="header" id="1-header">Название блока</div>
<div class="content" id="1-content">
	<div class="text">
		Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
	</div>
</div>

Заменить в строках id=”1-header” и id=”1-content” цифру 1 (в данном случае) на порядковый номер блока.

Демо

Рекламная пауза

» 65 комментариев

  1. А если content меняется динамически и в стиле overflow:visible, то в IE эта часть все равно размер не меняет…подскажите плз какая альтернатива для ослика?

  2. Спасибо, круто, то что искал, делал по другому не мог избежать непонятного “дергания”, здесь все плавно!

  3. Скажите, а как видоизменить, чтобы предыдущий блок не закрывался сам?

  4. Спасибо!
    Скажите, а как можно сделать сохранение в cooks???

  5. Ок! а как сделать что-бы ВСЕ блоки выезжали допустим слева или сверху

  6. Сделал все как описан у Вас. Но проблема в том, что подменю не выезжает при клике на пункт меню. При этом оно нормально заезжает обратно.

  7. Довольно долго уже это ищу, но не могу найти. Скажите, а если мне для одной страницы это нужно сделать, то вот эти громоздкие коды придётся для всех прописывать. А нет вариантов, что бы только на одной странице всё прописать? То есть не залазия в head и body…

  8. Спасибо большое!
    А много ли переписывать чтобы добиться того, чтобы блоки выезжали не вниз, а вверх?

  9. Скажите, а на юкозе это работает?

  10. Не получается подключить CSS.Положил его в корневую папку сайта.
    Что ещё надо прописывать или подключать?А так всё работает,но без
    красивостей.Так у меня выглядит _xapa.dyndns.org/documents/84.html
    Если можно объяснение поподробней,для не знающих азов веб.Только учусь.

  11. И где это прописывать?Сайт делаю через EZGenerator.Может ещё надо ссылки на изображение?

  12. Спасибо за подсказки.Нашел всё у себя в программе.Одно слово лох.

  13. Посмотри пожалуйста не работает на Kapcms
    _xapa.dyndns.org/kap/?page=12
    Не дает вставить эти строки затирает

  14. Здравствуйте. Очень классное меню, и вообще на сайте много хороших и полезных вещей. Подскажите а можно в этом меню организовать подпункты?
    Пункт№1
    Подпункт №1
    Подпункт№1
    Пункт№2
    Примерно так.

  15. При встраивании кода в существующую страницу блоки отображаются с отступом от верхнего края страницы или ячейки таблицы(в которую встроены). Где убрать параметр не догоняю?
    Ссылка на страницу _inform-plus-l.ru/news.php

  16. Прошу прощения за тупой вопрос, а скрытый текст он индексируется поисковой системой?

  17. Большое спасибо очень красивые блоки! Работают.
    Подскажите пожалуйста у меня есть проблема, яндекс карта не работает в блоках, помогите решить проблему пожалуйста.

  18. Спасибо за скрипт, но я столкнулся с проблемой. Мне на одну страницу требуется вставить несколько таких блоков. Но когда я вставляю второй он отказывается работать. Подскажите пожалуйста, как заставить работать оба?

  19. отображает только 5 блоков (а сделано 15). прописал везде порядковый ID – не помогло. прошу помочь.

    _spmbiysk.ru/vakansii.html

    • Вы явно напортачили в коде, т.к. “ученик токаря” появляется при нажатии “шлифовщик по шлифовке…”.
      Скиньте мне страницу на jemand[at]yandex[dot]ru

  20. решил проблему. точнее.. нашел “косяк” :)

  21. На IE6 сворачивание не работает. Пожалуйста, модифицируйте код. Ждем…

  22. Как прописать на другую ссылку раскрывание блоков?
    например будет меню, при выборе пункта, открывался соответствующий блок
    заранее спасибо!

  23. В общем никак… Конструкция onload не позволяет. Решил проблему по-другому: раскрывающийся блок запихал еще в один div
    style=”display:none”
    и на jquery сделал его появление с той же самой прогрузкой сайта:
    $(window).bind(‘load’, function() {
    document.getElementById(‘id’).style.display = “block”;}); Впринцепе можно решить многими способами, для меня этот проще всего.

  24. не работает в ie8 в сочетании с js _ruseller.com/lessons/les288/example/js/mootools.js

    а так работает везде идеально, помогите пожалуйста разабраца.

  25. Демонстрация не работает в Хроме. (?)

  26. ..окей.. у меня в хроме не работает.. (не страшно)
    Вопрос, а у вас нет возможности написать этот код на php? чтобы можно было подгрузить из отдельного файла…

  27. Спасибо все работает отлично
    может кто-то подскажет что надо поменять в скрипте что бы первый блок был открыт с самого начала, а остальные закрыты,
    но при нажатии на любой другой он скрывался и открывался нажимаемый
    заранее спасибо

  28. Добрый день. Проблема такая:
    Блоки не корректно открываются в IE, пробовал менять размер в css, но не помогает, во всех остальных браузерах отлично.

  29. Первый блок

    id=”1-header” и id=”1-content” не пройдут валидацию, так как имя идентификатора должно начинаться только с буквы.
    Напишите пожалуйста решение проблемы.
    Спасибо.

  30. Не убедило. стока кода + ява.

  31. onload срабатывате с задержкой . Т.е при загрузке страницы блоки показываются
    не некоторое время ~1c затем скрываются как надо.

  32. Кстати если загрузить страницу с примером работы скрипта http://jemand.ru/examples/raskryvayushhiesya-bloki-div-na-javascript.html то эффект тот-же только задержка небольшая сразу становиться видно все блоки потом скрываются.


Оставить комментарий