Desplegable en versión móvil con Elementor en WordPress

Desplegable en versión móvil con Elementor en Wordpress
Desplegable en versión móvil con Elementor en WordPress

Contenido

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:

diseño web valencia generacionweb

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.

maquetacion

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.

contenido oculto 1

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»

botn

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();
});

 

 

Deja un comentario

Filtra por categoría:

¿Necesitas una web? Contacta con nosotros.

Relacionados: