Оценок: 8
Раскрытие блоков по кнопке показать еще на JS (Jquery)

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

Примеры реализации раскрывающихся блоков на JS по клику. Самый простой вариант - открыть блок следующий за элементом, по которому кликнули и вариант посложнее, в нем есть три основных блока, внутри этих блоков есть несколько внутренних, часть из которых скрыты и должны открываться по клику на слово/ссылку в тексте.

Материал переписан полностью 23.08.23. Внизу будет пример в CodePen (можно покликать и удобнее посмотреть), а пока все с пояснениями. Вот что получится в итоге:

Результат

  1. Кнопка откроет следующий за ней блок
  2. Кнопки в тексте, которые открывают блоки ниже
  3. То же самое, что и 2, в другом блоке. Одна из кнопок активна
  4. Открытый блок

HTML код

<div class="bloki">
  <div class="block">
    <div class="text">Пример с раскрытием блока следующего за кнопкой</div>
    <span class="toggle-next">Показать еще <span class="plmin plus">+</span><span class="plmin minus">-</span></span>
    <div class="text text-hide">Это текст, скрытый после кнопки</div>
  </div>
  <div class="block">
    <div class="text">
      Пример с раскрытием 
      <span class="toggle-box" data="box1">одного <span class="plmin plus">+</span><span class="plmin minus">-</span></span> или <span class="toggle-box" data="box2">другого <span class="plmin plus">+</span><span class="plmin minus">-</span></span> блока, соответствующего кнопке внутри текста
    </div>
    <div class="text text-hide box1">Это содержимое блока соответствует кнопке "одного" (box1)</div>
    <div class="text text-hide box2">Это содержимое блока соответствует кнопке "другого" (box2)</div>
  </div>
  <div class="block">
    <div class="text">
      Пример второй с раскрытием 
      <span class="toggle-box" data="box1">одного <span class="plmin plus">+</span><span class="plmin minus">-</span></span> или <span class="toggle-box" data="box2">другого <span class="plmin plus">+</span><span class="plmin minus">-</span></span> блока, соответствующего кнопке внутри текста
    </div>
    <div class="text text-hide box1">Это содержимое блока соответствует кнопке "одного" (box1)</div>
    <div class="text text-hide box2">Это содержимое блока соответствует кнопке "другого" (box2)</div>
  </div>
</div>

Здесь есть три основных (class "block") блока подряд. В первом есть некий текст, после него кнопка "Показать еще", после нее скрытый блок. Нажимаем кнопку - скрытое содержимое появляется.

Второй и третий одинаковы, дубли сделаны для наглядности. Есть некий текст, внутри текста кнопки, после текста скрытое содержимое. Нажатие на кнопку в тексте показывает соответствующий ей блок и скрывает остальные. Классы внутри блоков одинаковы, нужно показать/скрыть содержимое в нужном блоке.

CSS

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

.text {padding:15px 20px;border:1px solid #ccc;border-radius:20px;margin-bottom:15px;margin-top:15px}
.plmin {line-height:20px;display:inline-block;background: #fa5205;width:20px;border-radius:10px;text-align:center;font-weight:bold;color:#fff;}
.open > .plmin {background: #000;}
.minus {display:none}
.open > .plus {display:none}
.open > .minus {display:inline-block}
.toggle-box,.toggle-next {font-weight:bold;cursor:pointer;color:#fa5205}
.text-hide {display:none}
.text-hide.open {display:block}

Java Script

Для начала раскрытие блока следующего за кнопкой. Здесь покажу два варианта. Первый - с использованием функции "toggleClass", второй - с проверкой, открыт ли блок. Можно и так и так, второй вариант позволяет добавить некие дополнительные действия.

Вариант 1:

<script>
$('.toggle-next').click(function() {
  $(this).toggleClass('open').next().toggleClass('open');
});
</script>

Вариант 2:

<script>
$('.toggle-next').click(function() {
		if (!$(this).hasClass('open')) {
			$(this).addClass('open').next().addClass('open');
		} else {
			$(this).removeClass('open').next().removeClass('open');
		}
});
</script>

Теперь скрипт для открытия блоков по кнопкам в тексте:

<script>
$('.toggle-box').click(function() {
  var tclass = $(this).attr('data');
  if (!$(this).hasClass('open')) {
    $(this).parents('.block').find('.open').removeClass('open');
    $(this).addClass('open').parents('.block').find('.'+tclass).addClass('open');
  } else {
    $(this).parents('.block').find('.open').removeClass('open');
  }
});
</script>

Результат

Оценок: 8

Похожие

Owl Carousel 2 - изображения в пагинации
Простой калькулятор стоимости на jQuery
Горизонтальное меню на основе списка
PHP. Подключение оплаты Direct Pay Online (DPO)

Комментарии (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
        ответ
        Интересное