Cómo mostrar u ocultar una sección al hacer clic en Elementor

Conclusiones clave

• Elementor no tiene control dedicado para mostrar u ocultar una sección al hacer clic, por lo que los tres métodos de trabajo son el widget Accordion, un widget de alternancia de contenido y un botón con un script corto.
• El widget Elementor Accordion oculta cualquier widget dentro de un elemento hasta que se hace clic en su título, y el estado predeterminado establecido en Todo contraído mantiene el elemento cerrado durante la carga de la página.
• El widget Master Addons Toggle Content funciona como un interruptor de mostrar y ocultar cuando una de sus dos opciones se deja vacía y la otra mantiene la sección.
• Un botón puede mostrar u ocultar cualquier contenedor Elementor con aproximadamente diez líneas de JavaScript en un widget HTML, usando una clase CSS en el botón y otra en el contenedor.
• Las condiciones de visualización de Elementor y la configuración de ocultación responsiva no reaccionan a los clics porque deciden qué se muestra por regla o por dispositivo antes de que el visitante haga algo.

Para mostrar u ocultar una sección al hacer clic en Elementor, coloque la sección dentro de algo que se abra al hacer clic. El widget Accordion hace esto sin ningún complemento adicional. Una opción de contenido le brinda un interruptor Mostrar y ocultar. Un botón con algunas líneas de script puede revelar cualquier contenedor en la página. Elementor no tiene una única configuración de “mostrar al hacer clic”, por lo que una de estas tres es la ruta.

Cada método a continuación se creó y probó en Elementor 4.3. Elija cómo debe verse el disparador: una barra de título, un interruptor o un botón.

¿Qué método se adapta a tu página

Los tres métodos ocultan una sección hasta que se hace clic. Se diferencian en lo que hace clic el visitante y en la cantidad de configuración que necesita.

Método 1: el widget Accordion

El widget Accordion es la forma más rápida de mostrar una sección al hacer clic, porque cada elemento es un contenedor que acepta cualquier widget. Todo lo que coloques dentro permanece oculto hasta que se hace clic en el título.

1. Edita la página con Elementor y arrastra el Acordeón widget donde debe estar la sección oculta.
2. Elimina los elementos que no necesitas. Para una sección oculta, conserve un elemento.
3. Escriba el título en el que harán clic los visitantes, como Mostrar detalles de entrega.
4. Haga clic dentro del elemento y agregue su contenido: texto, imágenes, un formulario o un diseño de contenedor completo.
5. Abierto Interacciones y conjunto Estado predeterminado a Todo colapsó.

El límite de este método es la apariencia. El disparador es siempre una barra de título directamente encima del contenido. Si necesita un botón diseñado o un disparador en algún otro lugar de la página, utilice el Método 3. Para obtener más estilos de título, el Widget de acordeón avanzado es una opción.

Método 2: alternar contenido con una opción vacía

Un cambio de contenido normalmente cambia entre dos bloques. Deje un bloque vacío y se convertirá en un interruptor de mostrar y ocultar: una etiqueta no muestra nada, la otra muestra su sección.

Estos pasos utilizan Alternar contenido de Master Addons Pro. Probamos la opción vacía en Elementor 4.3 y no deja espacios ni marcadores de posición.

1. Arrastrar Alternar contenido en la página.
2. En el Elementos listar, etiquetar el primer elemento Ocultar detalles y eliminar el texto de muestra para que su contenido esté vacío.
3. Etiquete el segundo elemento Mostrar detalles. Escriba el contenido en el editor o configúrelo Tipo para Planificar y elegir una plantilla guardada para un diseño completo.
4. Abierto Alternar configuración y vete Índice activo en 1, la página se carga con la sección oculta.
5. Conjunto Posición a Antes si el interruptor debe colocarse encima de la sección, o Después para colocarlo debajo.

El cambio hace que el estado sea obvio, lo que se adapta a detalles opcionales como datos nutricionales, especificaciones técnicas o términos. Para invertirlo al revés, con la sección visible primero, establezca el índice activo en 2.

¿Cambiar entre dos secciones? El Alternar página de widget de contenido tiene conmutadores de facturación, tablas de especificaciones y ocho demostraciones en vivo más.

Método 3: un botón y un script corto

Utilice un script cuando el disparador deba ser un botón normal, o cuando el botón y la sección estén en diferentes lugares. Agrega una clase CSS al botón, otra a la sección y pega un pequeño fragmento en un widget HTML.

1. Agregar un Botón widget. En Avanzado > Clases CSS, tipo show-hide-button. Deje vacío el campo de enlace del botón.
2. Seleccione el contenedor que desea ocultar. En Avanzado > Clases CSS, tipo show-hide-target.
3. Arrastra un html widget en cualquier parte de la página y pegue el código a continuación.
4. Actualice la página y pruébela en la interfaz.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

La primera regla de estilo oculta el contenedor. El segundo lo muestra una vez que el script agrega el is-open clase. El tercero mantiene el contenedor visible dentro del editor Elementor, para que aún puedas editarlo. Cada clic en el botón agrega o elimina la clase.

Tres notas sobre este método. Cada contenedor con la clase se abre juntos, así que use diferentes nombres de clases si necesita pares separados en una página. El texto del botón no cambia por sí solo. Y si un complemento de optimización de scripts o almacenamiento en caché retrasa JavaScript, el primer clic se puede ignorar hasta que se cargue el script.

Si la sección debe abrirse sobre la página, utilice una ventana emergente. Ver cómo agregar una ventana emergente en Elementor.

Qué no funciona: condiciones de visualización y configuraciones responsivas

Dos funciones de Elementor suenan como si debieran hacer esto y no lo hacen. Ambos ocultan contenido, pero ninguno reacciona al clic.

• Configuración responsiva. Avanzado > Responsive tiene Ocultar en escritorio, Ocultar en tableta y Ocultar en móvil. Ocultan un elemento por tamaño de pantalla, todo el tiempo.
• Condiciones de visualización. Condiciones de visualización del elementador mostrar u ocultar un elemento por regla, como estado de inicio de sesión, rol de usuario, fecha o navegador. La decisión se toma cuando se carga la página.

Son las herramientas adecuadas cuando el sitio debe decidir lo que ve un visitante. Los cubrimos Condiciones de visualización del elementador, y el Extensión de condiciones de visualización page enumera todas las reglas que admite. Cuando el visitante decida, utilice uno de los tres métodos de clic anteriores.

Preguntas frecuentes

Pensamientos finales

Hay tres formas confiables de mostrar u ocultar una sección al hacer clic en Elementor. Utilice el widget Accordion cuando la barra de título esté bien, un cambio de contenido con una opción vacía cuando desee un interruptor visible y un botón con un script corto cuando el activador tenga que ubicarse en otro lugar.

Si terminas cambiando entre dos secciones con más frecuencia que ocultando una, el Alternar widget de contenido está construido para eso.

Lectura relacionada

• Condiciones de visualización del elementor: muestra y oculta el contenido por regla
• Cómo agregar una ventana emergente en Elementor
• Efectos de desplazamiento elemental
• Cómo crear un botón de alternancia en Elementor (3 formas)
• Variador de elementor vs acordeón vs pestañas vs conmutador de contenido