Класс CSS, который генерирует отображение: нет автоматически

Question

У меня есть контейнер DIV с внутренней DIV с меткой с этим классом labelSection

<DIV class="form-group labelSection">

и ряд других DIV без тега labelSection

<DIV class="form-group questionHidden">

Я хотел бы знать, могу ли я создать класс для добавления в DIV с меткой (labelSection), которую я скрываю, когда все другие DIV в контейнере имеют класс questionHidden

<DIV class="Container">
        <DIV class="form-group labelSection">to be hidden when all the others are hidden</DIV>

        <DIV class="form-group questionHidden">1</DIV>
        <DIV class="form-group questionHidden">2</DIV>
        <DIV class="form-group">3</DIV>
        <DIV class="form-group questionHidden">4</DIV>

</DIV>

Спасибо

Answer 1

Для этого вам нужно использовать Javascript. Это невозможно только с помощью CSS.

Вот рабочий пример

$(function() {
  $(".hideDiv").on('click', function() {
    $(this).parent().addClass("questionHidden");
    var allHidden = true;
    $(".Container .form-group").each(function() {
      if ($(this).hasClass("labelSection")) {
        return true;
      }
      if (!$(this).hasClass("questionHidden")) {
        allHidden = false;
      }
    });
    if (allHidden) {
      $(".labelSection").hide();
    }
  });
});

.questionHidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Container">
  <div class="form-group labelSection">to be hidden when all the others are hidden</div>

  <div class="form-group">1 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">2 <button class="hideDiv">Hide</button></div>
  <div class="form-group">3 <button class="hideDiv">Hide</button></div>
  <div class="form-group questionHidden">4 <button class="hideDiv">Hide</button></div>
</div>