Появление блоков при клике по ссылке, скрытие при повторном клике + добавлять\убирать класс?

Question

[Максим Воронков]

Дорогие коллеги, есть код https://jsfiddle.net/orsc3xs7/
В данном коде не хватает, переключение видимости субменю и при повторном клике скрытие субменю. И закрытие субменю при клике на пустом месте

Answer 1

[Роман Дворянов]

У вас очень специфичная разметка для реализации табов, но тем не менее https://jsfiddle.net/orsc3xs7/6/
css

.nav-service {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

.nav-service li {
  float: left;
  margin-left: 10px;
}

.sub-menu {
  position: absolute;
  top: 20px;
  left: 0px;
  visibility: hidden;
  opacity: 0;
  transition: all ease 0.2s
}

.active+.sub-menu {
  visibility: visible;
  opacity: 1;
}

jquery

$('.nav-button').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  $('.nav-button').not(this).removeClass('active');
  $(this).addClass('active').next().delay(200).show();
});

$('html, .close').click(function() {
  if ($('.nav-button.active').length > 0) {
    $('.nav-button').removeClass('active').next().delay(200).hide()
  }
});