jquery - ¿Cómo puedo mostrar/ocultar un contenedor div en JavaScript?

Estoy tratando de usar el método toggleClass para ocultar/mostrar un contenedor div al hacer clic en un botón. Por lo tanto, uso jQuery. Funciona cuando la clase .hide está configurada en visibility: hidden.

Sin embargo, quiero hacer que el contenedor div .aufklapp-container sea visible cuando hago clic en el botón. Para CSS, intenté esto:

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

Sin embargo, el contenedor div no cambia a visible. Permanece oculto. Por favor, ayúdame, no lo entiendo.

$(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>

Respuesta #1

El problema es porque has establecido visibility: hidden en el elemento table, no en el elemento padre .aufklapp-container, por lo tanto, alternar la clase allí no hace nada. Si mueves la propiedad visibility a la clase correcta en tu CSS, el código funciona:

$(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>

Además, solo como comentario, tendría más sentido renombrar la clase hide a show, ya que eso coincide mejor con su comportamiento.

Respuesta #2

Otra alternativa además de la dada antes sería cambiar un poco el código, cambiando el código de JavaScript a esto:

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

y agregando el atributo hidden al elemento HTML como <div class="aufklapp-container" hidden> y para el último en tu CSS, elimina la clase .hide y la propiedad visibility: hidden; de tu clase .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%;
}

Esto te dará 3 beneficios para tu código: (1) una mejor accesibilidad usando el atributo hidden en el marcado (puedes usarlo con otros atributos ARIA si es necesario); (2) guardas en caché tu contenedor a través de una referencia, evitando obtenerlo usando el código jQuery $ (".aufklapp-container") en cada clic; y (3) es una clase CSS genérica menos en tu base de código.