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í:
<button id="toggle">click me</button>
<div id="elem">text...</div>
También hay 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:
$('#toggle').click(function() {
$('#elem').slideToggle(1000);
});