Как я могу скрыть / показать div-контейнер в JavaScript?

Question

Я пытаюсь использовать метод toggleClass для скрытия / отображения div-контейнера, нажав кнопку. Поэтому я использую jQuery. Работает, когда класс .hide установлен на visibility: hidden.

Однако я хочу сделать контейнер Div .aufklapp-container видимым, когда я нажимаю кнопку. Для CSS я пробовал это:

.table { visibility: hidden } 
.hide { visibility: visible }

Однако div-контейнер не меняется на видимый. Это скрыто. Помогите мне, пожалуйста, я не понимаю.

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});

.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
  visibility: hidden;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie"></input>
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

Проблема в том, что вы установили visibility: hidden для элемента table, а не для родительского элемента .aufklapp-container, поэтому переключение класса там ничего не делает. Если вы переместите свойство visibility в правильный класс в CSS, код будет работать:

$(document).ready(function() {
  $(".aufklapp-button").click(function() {
    $(".aufklapp-container").toggleClass("hide");
  });
});

.aufklapp-button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 30pt;
  text-align: center;
  color: white;
  background: #7F868D;
  padding: 5px 30px 10px 30px;
  width: 60%;
  border: none;
  border-radius: 35px;
  cursor: pointer;
}

.aufklapp-container {
  visibility: hidden;
}

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

.hide {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="container-button">
  <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie" />
  <div class="aufklapp-container">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td>Zielerreichung in %</td>
        </tr>
        <tr>
          <td>Kriterium 1</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 2</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 3</td>
          <td>Regler</td>
        </tr>
        <tr>
          <td>Kriterium 4</td>
          <td>Regler</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Кроме того, было бы более разумно переименовать класс hide в show, поскольку он лучше соответствует его классу. поведение.

Answer 2

Другой альтернативой, кроме приведенной выше, будет немного изменить код, изменив код JavaScript на следующий:

$(document).ready(function() {
  var aufklapp = $(".aufklapp-container");
  $(".aufklapp-button").click(function() {
    aufklapp.attr("hidden", aufklapp.attr('hidden') ? null : true);
  });
});

и добавив скрытый атрибут к элементу HTML как <div class="aufklapp-container" hidden> и, наконец, на вашем CSS, удалите класс .hide и свойство visibility: hidden; из своего класса .table.

.table {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15pt;
  text-align: left;
  width: 60%;
  padding: 10px 30px 20px 40px;
  border-color: #8D0011;
  border-width: 2px;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: white;
}

.table td {
  padding: 7px 20px 7px 20px;
}

.table td:nth-child(2) {
  width: 45%;
}

Это даст вам 3 преимущества для вашего кода: (1) лучшая доступность с использованием скрытого атрибута в разметке (вы можете использовать его с другими атрибутами ARIA , если необходимо); (2) вы кешируете свой контейнер через ссылку, избегая выборки с использованием jQuery кода $(".aufklapp-container") в каждом клике; и (3) на один класс CSS generi c меньше в вашей кодовой базе.