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

Результат

See the Pen show-hide box onclick by Vladimir (@webrazrab_ru) on CodePen.