Método slideToggle en jQuery

El siguiente método - slideToggle funciona así: si el elemento está oculto - lo muestra, y si se muestra - lo oculta. La conveniencia de este método es que todo esto se puede asignar a un solo botón, y no a dos, como fue en lecciones anteriores.

Consideremos el siguiente ejemplo. Supongamos que nuestro código HTML se ve así:

html<button id="toggle">click me</button>
<div id="elem">text...</div>

También hay CSS:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

Ahora escribamos el código para que al hacer clic en un botón el elemento se oculte y se muestre alternativamente:

javascript$('#toggle').click(function() {
  $('#elem').slideToggle(1000);
});