Оценок: 5
Раскрывающиеся по клику блоки div на js

Раскрывающиеся по клику блоки div на js

Пример реализации раскрывающихся блоков на JS по клику на один из элементов внутри блока.

Задача - есть несколько блоков, один из которых - описание, он должен быть скрытым и раскрываться при нажатии. Вот такой вид блоки имеют изначально:

HTML

<div class="bloki">
	<div class="block">
		<a id="1" class="kplus"><span>+</span></a>
		<h3 class="name">Первый блок</h3>
		<div>Текст 1-1</div>
		<div>Текст 1-2</div>
		<div>Текст 1-3</div>
		<p class="text1" style="display: none;">Текст в раскрывающемся блоке</p>
	</div>
	<div class="block">
		<a id="2" class="kplus"><span>+</span></a>
		<h3 class="name line">Второй блок</h3>
		<div>Текст 2-1</div>
		<div>Текст 2-2</div>
		<div>Текст 2-3</div>
		<p class="text2" style="display: none;">Текст в раскрывающемся блоке</p>
	</div>
</div>

Здесь для каждой ссылки (+) присвоен свой уникальный ID, тот же айди добавлен к классу тега <p>, т.е. если тег <a> будет присвоен id="123", то тегу <p>, который и станет скрытым блоком, будет присвоен class="text123".

Для скрытого блока так же добавлено свойство display:none

CSS

.bloki .block {
   background: #e7e7e7;
	padding: 2px 1%;
	margin-bottom: 5px;
	min-height: 30px;
}
.bloki .block > div, .bloki .block h3, .bloki .block a {
	float: left;
	min-width: 18%;
	margin: 0px;
	font-weight: normal;
	font-size: 1em;
	padding: 5px;
	margin-left: 0.5%;
	text-align: center;
}
.bloki .block a.kplus {min-width:10%;}
.bloki .block a.kplus span {
	background: #fa5205;
	border-radius: 10px;
	width: 25px;
	height: 25px;
	display: block;
	font-size: 20px;
	line-height: 25px;
	cursor:pointer;
	color: #fff;
}
.bloki .block p {
	clear:both;
	margin: 0px;
	padding: 10px;
	background:#fff;
}

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

Java Script

<script>
	jQuery(document).ready(function(){
		$('.kplus').on('click', function() {
			var theClass = $(this).attr('id');
			if ($('.text'+theClass).css('display') == 'none') {
				$('.text'+theClass).animate({height: 'show'}, 500);
				$('#'+theClass+'.kplus').addClass('viz');
				$('#'+theClass+'.kplus span').replaceWith('<span>-</span>');
			} else {
				$('.text'+theClass).animate({height: 'hide'}, 100); 
				$('#'+theClass+'.kplus').removeClass('viz');
				$('#'+theClass+'.kplus span').replaceWith('<span>+</span>');
			}
		});
	});
</script>

Здесь вначале определяем ID текущей кнопки (тег a), затем проверяем наличие свойства "display:none" у блока с классом textID, где ID - айди кнопки. Если такое свойство есть - показываем блок (show), так же добавляем класс "viz" для кнопки и меняем "+" на "-". Теперь немного дополню CSS т.к. есть возможность выделить кнопку, когда блок показан

Дополнение к CSS

.bloki .block a.viz span {
	background: #b1250c;
}

Результат

+

Первый блок

Текст 1-1
Текст 1-2
Текст 1-3
+

Второй блок

Текст 2-1
Текст 2-2
Текст 2-3
Оценок: 5
Хостинг облачных VDS/VPS серверов
  • Свои ISO образы
  • VDS с оплатой раз и навсегда
  • Аренда VDS на любой срок, с оплатой по дням
  • Большое разнообразие конфигураций
  • Дата-центры в ЕС и России
+ скидка 10%

Комментарии (6)

  1. +
    Второй блок
    Текст 2-1 (У ЭТОЙ СТРОЧКИ 1)
    Текст 2-2 (У ЭТОЙ 2)
    Текст 2-3 (УЭТОЙ 3)
    Текст в раскрывающемся блоке

    Как сделать что бы у каждой строчки в блоке был свой индификатор (класс?). и при клике на чекбокс (в моем случае) они бы все отображались

    Ирина 30 августа 2017, 14:13 0
    • Посмотреть бы Ваш код…

      Владимир 31 августа 2017, 00:41 0
    • блин, почему то не подключается js все перепробовал

      муха 16 ноября 2015, 20:20 0
      • Может конфликтует… а куда вставляете?

        Владимир 17 ноября 2015, 08:17 0
        • Я понял в чем дело, я 0 в js, взял просто скопировал код и вставил, а там редактировать надо еще, I'd прописовать.

          Муха 17 ноября 2015, 08:38 0
      • Спасибо то что нужно! Очень помогло)

        Oleg 16 ноября 2015, 07:55 0