Как сделать, чтобы гармошка при повторном клике обратно закрывалась?

Question

[it_pear_yurec]

При нажатии на другую гармошку все закрываются и открывается нажатая, а как сделать так, чтобы при повторном клике она же и закрывалась?

<div class="harmonic-block-cell">
								
								<div class="harmonic-block-cell-title">
									<p class="harmonic-block-cell__text-title">
										Токены обеспечены реальной недвижимостью
									</p>
									<div class="harmonic-block-cell-title__open gradient">
										<i class="fa fa-angle-down" aria-hidden="true"></i>
									</div>
								</div>

								<div class="harmonic-block-cell-description">
									<p class="harmonic-block-cell-description__text">
										Токены, получаемые, в процессе ITO платформы (пользовательские utility токены) впоследствии могут быть обменены на товарные токены конкретных проектов недвижимости, обеспеченные землей и объектами
									</p>
								</div>
							</div>
							<div class="harmonic-block-cell">
								
								<div class="harmonic-block-cell-title">
									<p class="harmonic-block-cell__text-title">
										Прогнозируемое изменение цены
									</p>
									<div class="harmonic-block-cell-title__open gradient">
										<i class="fa fa-angle-down" aria-hidden="true"></i>
									</div>
								</div>

								<div class="harmonic-block-cell-description">
									<p class="harmonic-block-cell-description__text">
										Прогнозируемое с высокой вероятностью изменение цены токена в зависимости от стадии реализации конкретного проекта — чем ближе к завершению, сдаче и началу эксплуатации, тем дороже товарные токены этого проекта
									</p>
								</div>
							</div>

<!--/// крипт гармошек ///-->
	<script>
		$(document).ready(function(){

			$('.harmonic-block-cell-title__open').click(function(){

				$('.harmonic-block-cell-title__open').removeClass('transform-180');
				$(this).closest('.harmonic-block-cell').find('.harmonic-block-cell-title__open').toggleClass('transform-180');

				$('.harmonic-block-cell-description').hide(500);

				$(this).closest('.harmonic-block-cell').find('.harmonic-block-cell-description').slideToggle(500);		
			});

		});
	</script>

Answer 1

[profesor08]

Тебе надо обработать все элементы как отельные блоки. А не плясать от какого-то.

$(".harmonic-block-cell").each(function() {
  let $button = $(this).find(".harmonic-block-cell-title__open");
  let $content = $(this).find(".harmonic-block-cell-description");
  
  $button.on("click", function() {
    $(this).toggleClass('transform-180');
    $(".harmonic-block-cell .harmonic-block-cell-description").slideUp(500);
    $content.slideToggle(500);
  }); 
});

Comments

[it_pear_yurec]

получается тоже самое что и у меня