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

Еще 4 материала, которые возможно Вам понравятся:

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

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

  1. муха 16 ноября 2015, 20:20
    блин, почему то не подключается js все перепробовал
    1. Владимир 17 ноября 2015, 08:17
      Может конфликтует… а куда вставляете?
      1. Муха 17 ноября 2015, 08:38
        Я понял в чем дело, я 0 в js, взял просто скопировал код и вставил, а там редактировать надо еще, I'd прописовать.
    2. Oleg 16 ноября 2015, 07:55
      Спасибо то что нужно! Очень помогло)