Как сделать сворачивание элемента при открытии другого?

Question

[Anto]

Доброго времени суток,

На сайте реализован умный фильтр и работает все как надо кроме одного, нужно что бы при нажатии на тип фильтра скажем Сезон сворачивался ранее открытый тип фильтра например Цена. Реализовано сворачивание на фильтра при нажатии на область вне фильтра так:

$(document).ready(function() {
	$(".button span").click(function() {
	  $('.hover-box').toggle();
	});
	$(document).on('click', function(e) {
	  if (!$(e.target).closest(".title-antfas").length) {
		$('.hover-box').hide();
	  } 
	  e.stopPropagation();
	});		
});

Подскажите как реализовать такую возможность.

Answer 1

[Юра Комаров]

Пробежать по всем вкладкам и убрать у них class="hover-box" (который отвечает за раскрытую вкладку) и присвоить его в конце кода той вкладке коротая должна быть открыта. Присвоение через $(this).addClass('hover-box')
Вполне быстрое решение

$(document).on('click', '.hover-box', function(e) {

Comments

[Anto]

Не подскажите куда что нужно дописать, в JS не силен.

[Юра Комаров]

Что бы написать код, мне нужно видеть картинку. Просто так легче придумывать логику

[Anto]

Юра Комаров, Адрес сайта достаточно будет?

[Юра Комаров]

Думаю да. Что нибудь изобретем )

[Anto]

Вот - Сайт Фильтр

[Юра Комаров]

https://codepen.io/Yurajun/pen/zEyqyx?editors=1111
Ну вот примерно то что тебе нужно. Я думаю просто и быстро

[Anto]

Юра Комаров, Сейчас он скрывает название Типа фильтра при нажатии на тип пример тут как работает
, так же нужно что бы он скрывался при нажатии вне фильтра, Вот сам код фильтра скопировал тольок вывод Типа фильтра Цена:

<div class="bx-filter-parameters-box-antfas title-antfas">
		<div id="price_c4ca4238a0b923820dcc509a6f75849b" class="bx-filter-parameters-box-title-antfas" onclick="smartFilter.hideFilterProps(this)">
			<span class="sp_price">Цена 
				<i class="fa fa-angle-down"></i>
			</span>
		</div>
			
			<!-- Раскрытие -->	
			<div class="bx-filter-block box-filter-mani-antfas hover-box" data-role="bx_filter_block">
				<div class="row bx-filter-parameters-box-container">
					<div class="bx-filter-parameters-box-container-block-antfas bx-left">
					<div class="bx-filter-input-container-antfas">
					<i class="bx-ft-sub">От</i>
						<input class="min-price" name="arrFilter_P1_MIN" id="arrFilter_P1_MIN" value="" size="10" onkeyup="smartFilter.keyup(this)" placeholder="2190" type="text">
					</div>
					</div>
					<div class="bx-filter-parameters-box-container-block-antfas bx-right">
					<div class="bx-filter-input-containe-antfasr">
					<i class="bx-ft-sub">До</i>
						<input class="max-price" name="arrFilter_P1_MAX" id="arrFilter_P1_MAX" value="" size="10" onkeyup="smartFilter.keyup(this)" placeholder="7590" type="text">
					</div>
					</div>
					</div>
								
			<div class="row">
				<div class="col-xs-12 bx-filter-button-box box-botttom-antfas">
					<div class="bx-filter-block">
						<div class="bx-filter-parameters-box-container">
							<input class="btn btn-themes" id="set_filter" name="set_filter" value="Показать" type="submit">
							<input class="btn btn-link" id="del_filter" name="del_filter" value="Сбросить" type="submit">
						</div>
					</div>
				</div>
			</div>
			</div>				
</div>

[Юра Комаров]

https://codepen.io/Yurajun/pen/zEyqyx?editors=1111
немного дописал, я уже сплю одним глазом )))

[Anto]

Юра Комаров, Спасибо за помощь, но он всеравно немного не так работает как надо, у меня этот код:

$(document).ready(function() {
  $(".button span").click(function() {
    $('.hover-box').toggle();
  });
  $(document).on('click', function(e) {
    if (!$(e.target).closest(".title-antfas").length) {
    $('.hover-box').hide();
    } 
    e.stopPropagation();
  });		
});

Работает верно только к нему не хватает что бы при нажатии на другой .title-antfas скрывался рядовками ранее открытый (если такой есть) .hover-box