Tengo esto a mitad de camino y tengo dos columnas. Una columna contiene listados de fotos col-md-8 y la otra muestra un mapa col-md-4. Mi objetivo es alternar el mapa y mostrar la columna de listados ocupando las 12 columnas. En este momento, solo he descubierto cómo ocultar el mapa y expandir la columna de listados, pero ahora debe volver a mostrarse. También necesito cambiar el texto del botón mostrar/ocultar según el estado de alternancia. Cualquier ayuda apreciada.
Esto es lo que descubrí hasta ahora.
$("#btn").click(function(e) { e.preventDefault(); $('#map').hide(); $('.expand-column').removeClass('col-md-8'); $('.expand-column').addClass('col-md-12'); });Puede reemplazar los métodos actuales con métodos de alternar y hacer que lo que tiene actualmente funcione en ambos sentidos
$("#btn").click(function(e) { e.preventDefault(); $('#map').toggle(); $('.expand-column').toggleClass('col-md-8 col-md-12'); });Te dejaré a ti crear una variable u otra clase para realizar un seguimiento del estado actual y usar eso para determinar el texto.
Después de implementar la respuesta de charlietfl, esto es lo que se me ocurrió para manejar el estado actual del texto de alternancia.
$("#btn").click(function(e) { e.preventDefault(); if($(this).text()=="hide map") { $(this).text("show map"); } else { $(this).text("hide map"); } $('#map').toggle(); $('.expand-column').toggleClass('col-md-8 col-md-12'); $('.constrain-photos').toggleClass('col-lg-3 col-lg-2'); return false; });