Problema con interacción de botones en Divi  

Hola a la comunidad de Webempresa,

Antes que nada, quiero agradecer cualquier ayuda que puedan brindarme. No soy programador profesional y estoy aprendiendo, así que estoy usando herramientas como ChatGPT y Gemini para implementar una funcionalidad específica en una página de mi sitio (reppli.ai).

El objetivo es crear una sección interactiva con Divi, donde los visitantes puedan filtrar contenido mediante botones. Para ser más precisos:

Descripción de la Sección Interactiva

La sección está estructurada con una fila de Divi que contiene tres columnas:

• Columna 1: Contiene 4 botones, que funcionan como un menú de navegación.
• Columna 2: Contiene 4 módulos de imagen de Divi.
• Columna 3: Contiene 12 módulos de texto de Divi, organizados en 4 grupos de 3 textos cada uno.

Funcionalidad Deseada:

Al hacer clic en cada botón de la Columna 1, la sección debe mostrar un contenido específico:

• Botón 1: Debe mostrar la Imagen 1 en la Columna 2 y el Texto 1, Texto 2 y Texto 3 en la Columna 3.
• Botón 2: Debe mostrar la Imagen 2 en la Columna 2 y el Texto 4, Texto 5 y Texto 6 en la Columna 3.
• Botón 3: Debe mostrar la Imagen 3 en la Columna 2 y el Texto 7, Texto 8 y Texto 9 en la Columna 3.
• Botón 4: Debe mostrar la Imagen 4 en la Columna 2 y el Texto 10, Texto 11 y Texto 12 en la Columna 3.

Al mismo tiempo, todos los demás elementos (imágenes y textos) deben quedar ocultos.

Código Implementado

Para lograr esto, he utilizado tanto CSS (en Divi > Opciones del tema > CSS personalizado) como JavaScript (en un módulo de código de Divi).

1. Código CSS (Divi > Opciones del tema > CSS personalizado):

#logo,
.logo_container {
  max-height: 100% !important;
}

.et_header_style_left #logo {
  max-width: 80%;
}

@media only screen and (min-width: 430px) {
  .et_header_style_left .mobile_menu_bar {
    padding-bottom: 55px !important;
  }

  #et-top-navigation {
    padding-top: 55px !important;
  }
}

/* Ocultar inicialmente */
#img1,
#img2,
#img3,
#img4,
#text1,
#text2,
#text3,
#text4,
#text5,
#text6,
#text7,
#text8,
#text9,
#text10,
#text11,
#text12 {
  display: none !important;
}

/* Mostrar por defecto */
#img1,
#text1,
#text2,
#text3 {
  display: block !important;
}

2. Código JavaScript (Módulo de código de Divi):

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Agregar clase activo al botón 1 por defecto
  document.getElementById("btn1").classList.add("activo");

  // *** FUNCIONES SIMPLIFICADAS ***

  // Función para Ocultar todos los elementos
  function ocultarTodos() {
    const imagenes = ["img1", "img2", "img3", "img4"];
    const textos = ["text1", "text2", "text3", "text4", "text5", "text6", "text7", "text8", "text9", "text10", "text11", "text12"];

    for (let i = 0; i < imagenes.length; i++) {
      document.getElementById(imagenes[i]).style.display = "none";
    }
    for (let i = 0; i < textos.length; i++) {
      document.getElementById(textos[i]).style.display = "none";
    }
  }

  // Función para Mostrar elementos por ID
  function mostrar(ids) {
    for (let i = 0; i < ids.length; i++) {
      document.getElementById(ids[i]).style.display = "block";
    }
  }

  // Función para activar un botón
  function activarBoton(boton) {
    const botones = document.querySelectorAll("[id^=btn]");
    botones.forEach(b => b.classList.remove("activo"));
    boton.classList.add("activo");
  }

  // *** BOTONES (Asegurar event.preventDefault() AL INICIO) ***

  // Botón 1
  document.getElementById("btn1").addEventListener("click", function(event) {
    event.preventDefault(); // *** ¡EVITAR DESPLAZAMIENTO! ***

    ocultarTodos();
    mostrar(["img1", "text1", "text2", "text3"]);
    activarBoton(this);
  });

  // Botón 2
  document.getElementById("btn2").addEventListener("click", function(event) {
    event.preventDefault(); // *** ¡EVITAR DESPLAZAMIENTO! ***

    ocultarTodos();
    mostrar(["img2", "text4", "text5", "text6"]);
    activarBoton(this);
  });

  // Botón 3
  document.getElementById("btn3").addEventListener("click", function(event) {
    event.preventDefault(); // *** ¡EVITAR DESPLAZAMIENTO! ***

    ocultarTodos();
    mostrar(["img3", "text7", "text8", "text9"]);
    activarBoton(this);
  });

  // Botón 4
  document.getElementById("btn4").addEventListener("click", function(event) {
    event.preventDefault(); // *** ¡EVITAR DESPLAZAMIENTO! ***

    ocultarTodos();
    mostrar(["img4", "text10", "text11", "text12"]);
    activarBoton(this);
  });
});
</script>

<style>
.activo {
  background-color: lightblue;
  color: black;
}
</style>

Estructura HTML de la Sección en Divi:

• Columna 1 (Botones):
  • Botón 1: Módulo de botón de Divi con ID CSS = "btn1"
  • Botón 2: Módulo de botón de Divi con ID CSS = "btn2"
  • Botón 3: Módulo de botón de Divi con ID CSS = "btn3"
  • Botón 4: Módulo de botón de Divi con ID CSS = "btn4"
• Columna 2 (Imágenes):
  • Imagen 1: Módulo de imagen de Divi con ID CSS = "img1" y Clase CSS = "image"
  • Imagen 2: Módulo de imagen de Divi con ID CSS = "img2" y Clase CSS = "image"
  • Imagen 3: Módulo de imagen de Divi con ID CSS = "img3" y Clase CSS = "image"
  • Imagen 4: Módulo de imagen de Divi con ID CSS = "img4" y Clase CSS = "image"
• Columna 3 (Textos):
  • Texto 1: Módulo de texto de Divi con ID CSS = "text1" y Clase CSS = "text"
  • Texto 2: Módulo de texto de Divi con ID CSS = "text2" y Clase CSS = "text"
  • Texto 3: Módulo de texto de Divi con ID CSS = "text3" y Clase CSS = "text"
  • Texto 4: Módulo de texto de Divi con ID CSS = "text4" y Clase CSS = "text"
  • Texto 5: Módulo de texto de Divi con ID CSS = "text5" y Clase CSS = "text"
  • Texto 6: Módulo de texto de Divi con ID CSS = "text6" y Clase CSS = "text"
  • Texto 7: Módulo de texto de Divi con ID CSS = "text7" y Clase CSS = "text"
  • Texto 8: Módulo de texto de Divi con ID CSS = "text8" y Clase CSS = "text"
  • Texto 9: Módulo de texto de Divi con ID CSS = "text9" y Clase CSS = "text"
  • Texto 10: Módulo de texto de Divi con ID CSS = "text10" y Clase CSS = "text"
  • Texto 11: Módulo de texto de Divi con ID CSS = "text11" y Clase CSS = "text"
  • Texto 12: Módulo de texto de Divi con ID CSS = "text12" y Clase CSS = "text"

El módulo de código de Divi con el código JavaScript se encuentra dentro de la misma sección y fila.

Problemas Observados:

A pesar del código implementado, se observan los siguientes problemas:

1. Comportamiento Inconsistente: La visibilidad inicial y la actualización al hacer clic en los botones no funcionan de manera consistente.
2. Filtrado Erróneo: Al hacer clic en los botones, no siempre se muestran las imágenes y textos correspondientes.
3. Desplazamiento Inesperado: La página se desplaza hacia la parte superior al hacer clic en los botones.

Solicitud de Ayuda:

Dado mi nivel de experiencia, necesito orientación para identificar la causa raíz de estos problemas. Sospecho que podría haber conflictos con el CSS o JavaScript propio de Divi, pero no estoy seguro de cómo solucionarlo.

Agradezco mucho cualquier sugerencia o asistencia que puedan brindarme. ¡Muchas gracias de antemano!

Contenido solo visible a usuarios registrados