Toggle, palabra inglesa, que viene a significar, alternar ó conmutar, en castellano. Es precisamente, para lo que lo utilizamos en javascript, para alternar ó intercambiar, entre los distintas clases ó estilos de CSS, que podemos asignarle a un elemento ó etiqueta HTML.
Es habitual usar este metodo de javascript, para programár botones ó elementos cliqueables (enlaces, input, etc), que desplieguen menus, como el icono de hamburguesa de mi cabecera, que despliegá el menu de navegación de mi sitio.
Supongámos, que por alguna razón queremos implementar en nuestra página, un botón que tenga una determinada funcionalidad. A mi se me ha ocurrido por ejemplo emplearlo para cambiar el background-color de toda mi página, dejo a vuestra imaginación otras muchisimás funciones o utilidades.
Qué por razones de espacio ó esteticas de la página, necesitas que ocupe poco sitio y sea discreto, puedes observar directamente a lo que me refiero examinándo con detenimiento el siguiente botón de abajo:
Habreís observado que de un botón, despliegas otro menu de botones que a su vez despliega ya las cajas donde conseguimos el objetivo final, de cambiar nuestro color de fondo. Pues si te ha gustado este efecto, te invito a estudiar como se consigue con una buena mezcla de clases CSS y un sencillo metodo de Javascript llamado toggle.
Para el código HTML, he construido una estructura de contenedor <div>, que a su vez contiene un <nav id="menu_bg"></nav> que contiene los botones, con los que finálmente, despliegas los <divs>, que ya te muestran los colores de fondo. Una estructura sencilla,
aquí lo interesante, es el uso que vamos a hacer del CSS, combinádo con JavaScript, para intercambiar entre los estilos, que tiene el <nav>, al hacer click en el botón.
Le daremos, dos estilos diferentes al <nav id="menu_bg"></nav>, con distintas propiedades CSS cada uno, aquí quiero hacer un inciso sobre la grán utilidad del empleó de custom-propertys ó (variables CSS), por tanto tendremos #menu_bg (el estilo por defecto), y #menu_bg.active (el que añadimos clickando en el botón). Quedando así:
Bueno este es mi código particular, siempre se puede experimentar con distintas estructuras html y propiedades css y asignarle los identificadores y nombres de clase que más te gusten.
Llamamos al método toggle de la propiedad classList del elemento menu_bg.
La ventaja del método toggle está en añadir ó quitar la clase, sin necesidad de condicionales, por cada click del usuario en el botón, que es un control toggle.
El código puede ser:
También, podríamos haberle asignádo un display: none;, que ya sabreís que sería, como si el objeto no estuviera en el documento y despues al añadir, la clase .active, darle un display: block;, pero a efectos de crearle la animación, de aparición y desaparición, yo prefiero jugar con propiedades como:
Pero en programación hay más de un camino y puedes conseguir el mismo objetivo de visualizar o esconder partes de un documento con el siguiente código:
Donde como observarás, se empleán algunas líneas más de Javascript, pero nos ahorramos la parte de trabajar más el CSS. Unicámente jugamos con height y opacity.
Este método, también esta empleado, para desplegar el primer botón y los siguientes del ejemplo, y nos sirve, para darle funcionálidad y dinámismo a las páginas. Te invito a visitar ventanas modales y tooltip, otra forma de dinámizar y darle funcionalidad a las páginas
Para concluir, si estas visualizando mi página en un monitor grande, no podrás ver que la cabecera incluye un botón oculto que funcioná por el mismo metodo toggle que sirve para desplegar u ocultar el menu de cabecera en pantallas pequeñas, acoplado mediante media-query, si quieres observarlo reduce la pantalla del navegador.
Esto es todo, gracias por leer, si tienes alguna sugerencia, hazmela saber, y si algo de esta página, te interesa, te invito a exáminarla, con la herramienta dev tools del navegador, ó click derecho y ver código fuente, es lo que siempre recomiendo, para aprender. Gracias y hasta la próxima.
