Como agregar el efecto collapse a un div y activarlo con un boton ASP.NET

Hola chic@s, hoy les traigo un nuevo tutorial de como asignarle el efecto collapse a un div y activarlo con un boton.

Vamos a usar uno de los ejemplos anteriores y solo aplicarle el efecto.

Primero vamos a agregar un div con la clase "collapse" que encierre todos los controles.





Ahora vamos a agregar un boton que active el efecto collapse y despliegue u oculte el div.

en la propiedad data-target, ponemos el id del div al que vamos aafectar con el efecto collapse, arriba no le puse id, pero solo es poner <div id="Controles" class="collapse">.






Ya que utilizamos un boton de asp, el postback que realice este boton no dejará que se mire correctamente el efecto en el div, lo que se hace para reparar este inconveniente es agregar la siguiente funcion javascript.







y eso es todo. Aquí les en el siguiente vídeo como se ve el efecto una vez que lo corremos:

Tambien les dejo el formulario de ejemplo.

Gracias por leerme el dia de hoy, pasen buen dia o tarde o noche.

ejemplo de efecto collapse en div