Раскрывающиеся по клику блоки 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

Добавить комментарий

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

  1. Ирина 30 августа 2017, 14:13
    0 #

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

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

    1. Владимир 31 августа 2017, 00:41
      0 #

      Посмотреть бы Ваш код…

    2. муха 16 ноября 2015, 20:20
      0 #

      блин, почему то не подключается js все перепробовал

      1. Владимир 17 ноября 2015, 08:17
        0 #

        Может конфликтует… а куда вставляете?

        1. Муха 17 ноября 2015, 08:38
          0 #

          Я понял в чем дело, я 0 в js, взял просто скопировал код и вставил, а там редактировать надо еще, I'd прописовать.

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

        Спасибо то что нужно! Очень помогло)