Появление и скрытие блоков?

Question

[BIGO23]

Есть js

$('.toggle-container').on('click', function(e) {
		$(this).find('.toggle').toggleClass('active');


		if ($(this).find('.toggle').hasClass('active')) {
			$(this).closest('.config__rent-block').find('.toggle-text-right').addClass('color-green');
			$(this).closest('.config__rent-block').find('.toggle-text-left').removeClass('color-blue');
		} else {
			$(this).closest('.config__rent-block').find('.toggle-text-left').addClass('color-blue');
			$(this).closest('.config__rent-block').find('.toggle-text-right').removeClass('color-green');
		}
	});

и html

<div class="config__rent-block">
				<span class="toggle-text-left color-blue" class="mr-4 color-blue">Название1</span>
				<div class="toggle-container">
					<div class="toggle"></div>
				</div>
				<span class="toggle-text-right" class="ml-3">Название2</span>
			</div>

При переключении меняется цвет надписей как сделать чтоб при переключении появлялся один div а другой скрывался и наоборот

Answer 1

[WapSter]

Точно так же только вместо .addClass() и .removeClass() использовать .show() и .hide()

Comments

[BIGO23]

Сделал так

$('.toggle-container').on('click', function(e) {
		$(this).find('.toggle').toggleClass('active');


		if ($(this).find('.toggle').hasClass('active')) {
			$(this).closest('.config__rent-block').find('.toggle-text-right').addClass('color-green');
			$(this).closest('.config__rent-block').find('.toggle-text-left').removeClass('color-blue');
			$(this).closest('.slider').find('.div1').hide();
			$(this).closest('.slider').find('.div2').show();
		} else {
			$(this).closest('.config__rent-block').find('.toggle-text-left').addClass('color-blue');
			$(this).closest('.config__rent-block').find('.toggle-text-right').removeClass('color-green');
			$(this).closest('.slider').find('.div2').hide();
			$(this).closest('.slider').find('.div1').show();
		}
	});

и html

<div class="config__rent-block">
				<span class="toggle-text-left color-blue" class="mr-4 color-blue">Название1</span>
				<div class="toggle-container">
					<div class="toggle"></div>
				</div>
				<span class="toggle-text-right" class="ml-3">Название2</span>
			</div>
			<div class="slider6">
			<div class="div1">1</div>
			<div class="div2">2</div>
			</div>

Не работает оба показываются при переключении

[WapSter]

BIGO23, будте внимательнее

[BIGO23]

[WapSter]

BIGO23, вы ищите элемент там где его нет.

[BIGO23]

Тимур Турсунбаев, Не могу догнать как сделать можете сказать как сделать рабочий вариант я не силен в javascript

[WapSter]

BIGO23, this у тебя кнопка, ты у нее ищешь родителя .slider кстати такого блока у тебя в принципе нет, даже если ты обратишь внимание НА ОШИБКУ В НАПИСАНИИ HTML КЛАССОВ ГРАММАТИЧЕСКУЮ, то все равно у твоего this нет родителя .slider

[WapSter]

BIGO23, https://codepen.io/wapster92/pen/WWgqop

[BIGO23]

Тимур Турсунбаев, Я поправил вроде работает но при первой загрузке показывается оба блока
Обновил https://codepen.io/mishiko23/pen/xeaoVy

[BIGO23]

Как сделать чтоб по дефолту div1 был открыть а div2 закрыт

Answer 2

[Andrew]

Дать им один класс и через .toggle()
менять всем в нужном блоке, с этим классом?

$('.toggler').click(function(){
$(this).find('.toToggle').toggle()
});