Как сделать для нескольких блоков «показать еще»?

Question

[RoadMoscow]

Как реализовать для нескольких блоков "показать еще"?
Если такой контейнер один, тогда все работает отлично, а когда несколько .container тогда они или не работают или открываются/закрываются вместе.

<div class="container">
							<div id="button">Показать ещё</div>
							<div id="block" style="display: none;">
								Какой-то скрытый текст 1
							</div>>
						</div>
						<div class="container">
							<div id="button">Показать ещё</div>
							<div id="block" style="display: none;">
								Какой-то скрытый текст 2
							</div>>
						</div>

$(function() {

	$('#button').on('click', function(e) {
		$('#block').slideToggle(function() {
		  console.log($(e.target).is(':visible'));
		  $(e.target).text($(this).is(':visible') ? 'Скрыть' : 'Показать еще');
		});
	});

});

Answer 1

[Павел]

<div class="container">
              <div class="button">Показать ещё</div>
              <div class="block" style="display: none;">
                Какой-то скрытый текст 1
              </div>>
            </div>
            <div class="container">
              <div class="button">Показать ещё</div>
              <div class="block" style="display: none;">
                Какой-то скрытый текст 2
              </div>>
            </div>

$(function() {

  $('.button').on('click', function(e) {
    $(this).next('.block').slideToggle(function() {
      console.log($(e.target).is(':visible'));
      $(e.target).text($(this).is(':visible') ? 'Скрыть' : 'Показать еще');
    });
  });

});

Comments

[RoadMoscow]

Спасибо. А если верстка не много сложнее? По сути в разных контейнерах. Ваш пример проверил, да работает, применил к своему коду и отказывается работать.

[Павел]

RoadMoscow, без кода непонятно о чем речь

[RoadMoscow]

Вот оригинал верстки, так выглядит отдельный блок

<div class="base__rooms--item">
							<div class="row">
								<div class="col-lg-3">
									<div class="image--base__rooms--item">
										<img src="img/room-img-1.jpg" alt="">
									</div>
								</div>
								<div class="col-lg-4">
									<div class="info--base__rooms--item">
										<div class="title--base__rooms--item">Номер «Стандарт» 2-местный</div>
										<div class="services--base__rooms--item">
											<div class="service--base__rooms--item">Шкаф</div>
											<div class="service--base__rooms--item">Раздельные кровати</div>
											<div class="service--base__rooms--item">Wi-fi</div>
											<div class="service--base__rooms--item">Парковка</div>
											<div class="service--base__rooms--item">Мини-бар</div>
											<div class="service--base__rooms--item">2-спальная кровать</div>
										</div>
									</div>
									<div class="button btn__base__room--more">Показать описание и фото</div>
								</div>
								<div class="col-lg-2">
									<ul class="rules--base__rooms--item">
										<li><i class="fas fa-user"></i> 1 Гость</li>
										<li><i class="fas fa-utensils"></i> Без питания</li>
									</ul>
								</div>
								<div class="col-lg-3">
									<div class="cost--base__rooms--item">
										от<span>2000</span>грн/сутки
										<a href="#">Уточнить цену</a>
									</div>
								</div>
							</div>
							<div class="block base__rooms--item-more" style="display: none;">
								<div class="row">
									<div class="col-lg-6">
										<div class="info--base__rooms--item">
											<div class="about--base__rooms--item">
												<p>Уютный номер для двоих с одной двуспальной или двумя раздельными кроватями. В номере имеется шкаф, стол, раскладное кресло, телевизор и кондиционер.</p>
											</div>
											<div class="subtitle--base__rooms--item">В стоимость включено:</div>
											<div class="services--base__rooms--item">
												<div class="service--base__rooms--item">Шкаф</div>
												<div class="service--base__rooms--item">Раздельные кровати</div>
												<div class="service--base__rooms--item">Wi-fi</div>
												<div class="service--base__rooms--item">Парковка</div>
												<div class="service--base__rooms--item">Мини-бар</div>
												<div class="service--base__rooms--item">2-спальная кровать</div>
												<div class="service--base__rooms--item">Мягкая мебель</div>
												<div class="service--base__rooms--item">Душ</div>
												<div class="service--base__rooms--item">Кондиционер</div>
												<div class="service--base__rooms--item">Телевизор</div>
												<div class="service--base__rooms--item">Стол со стульями</div>
												<div class="service--base__rooms--item">Фен</div>
												<div class="service--base__rooms--item">Туалетно-косметические принадлежности</div>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="gallery--base__rooms--item">
											<a class="gallery__base-photo" href="img/img-1.jpg" data-fancybox="images">
												<img src="img/img-1.jpg" alt="" />
											</a>
											<a class="gallery__base-photo" href="img/img-2.jpg" data-fancybox="images">
												<img src="img/img-2.jpg" alt="" />
											</a>
											<a class="gallery__base-photo" href="img/img-3.jpg" data-fancybox="images">
												<img src="img/img-3.jpg" alt="" />
											</a>
											<a class="gallery__base-photo" href="img/img-4.jpg" data-fancybox="images">
												<img src="img/img-4.jpg" alt="" />
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>

[Павел]

RoadMoscow,

$(function() {
  $('.button').on('click', function(e) {    
    $(this).parents('.base__rooms--item').find('.block').slideToggle(function() {
      console.log($(e.target).is(':visible'));
      $(e.target).text($(this).is(':visible') ? 'Скрыть' : 'Показать еще');
    });
  });
});

[RoadMoscow]

Павел, Спасибо огромное.