Vamos a maquetar unas secciones para móvil, luego las vamos a ocultar con css y por último, vamos a hacer que se muestren con un botón mediante jquery.
Este es el efecto deseado:
Maquetamos las secciones que se desplegarán
Nos ponemos en versión móvil y maquetemos a nuestro gusto con elementor, en este caso hemos maquetado debajo del header unos recuadros en color para whatsapp y teléfono, seguido de 3 bloques de contactos. Todo esto se desplegará desde el botón del header del sobrecito.
Añadimos la clase que oculta los elementos
Una vez tenemos todo maquetado, ponemos con elementor que es sólo visible para móvil y le ponemos la siguiente clase «contenido-oculto» a los elementos que se tienen que desplegar. En nuestro caso, se puso en las 4 secciones de debajo del header.
Seguidamente, en nuestro css, añadimos el siguiente código para ocultar estos elementos:
.contenido-oculto{
display:none;
}Creando el botón
El siguiente paso es ponerle la clase al botón que queremos que despliege estos elementos ocultos, en este caso es nuestro sobrecito, le ponemos la clase «btn-oculta»
Añadiendo el código jQuery
Ahora, en nuestro archivo js añadimos el siguiente código:
jQuery(document).on('click', 'div.btn-oculta i.far',
function (event){
event.preventDefault();
jQuery('.contenido-oculto').slideToggle();
});
