Запутался в jQuery?

Question

[Zombie42679]

https://codepen.io/anon/pen/KvepOw

Ситуация следующая, в идеале всё должно работать следующим образом: при клике на .nav - открывается весь контент, при клике на табы переключаются только табы (контент не сворачивается), класс active дается item и nav.

Не могу никак переделать, чтоб клик был на nav и при этом давался класс active для item который мы выбрали и nav на которой кликнули, соответственно если по второму nav тыкнуть, прошлый айтем сворачивается и классы active убираются.

Помогите советом или поправьте код на нём тоже пойму...

Заранее спасибо.

Answer 1

[Exploding]

css

.item {
  cursor: pointer;
}
.item.active {
  background-color: yellow;
}
.item.active .content{
  display: inline-block;
}
.item .content {
  display: none;
}
.item .nav.active {
  background-color: blue;
  display: inline-block;
}
.item .content .tabs .tab {
  display: inline-block;
}
.item .content .for-tabs .cont:first-child {
  display: block;
}
.item .content .for-tabs .cont {
  display: none;
}

js

$('.item').click(function() {
    $('.item').not($(this)).removeClass('active');
 $(this).toggleClass('active');
	});

$(".tab").click(function(e) {
   var ind = $(this).index();
		$(".tab").removeClass("active");
    $(".cont").hide();
		        $(this).addClass("active").closest(".content").find(".cont").eq(ind).show();
  e.stopPropagation();
});

Вроде бы оно! На кодепене я хз, не шарю я как там сохранять правильно... поэтому сюда надёжней.
Если мелочи то уже допилите там...

Answer 2

[Егор Живагин]

Взял твой пример, переписал полностью JS и чуть-чуть стили. Всё понятно?
Результат