Acordeón con ACF y Elementor creando un Short Code

1. En ACF añadimos un campo tipo Repetidor

2. Rellenamos los datos en el post

3. Creamos el Shot Code con el siguiente script en el archivo function

// Código corto para generar PHP personalizado en Elementor
function wpc_acf_acordeon_shortcode( $atts ) {
	$datos_acordeon = get_field('plan_de_estudio');
	//var_dump($datos_acordeon);
	if( $datos_acordeon ){
		// Imprimir el HTML del acordeón
    	echo '<div class="acordeon">';
		foreach ($datos_acordeon as $indice => $seccion) {
			echo '<div class="seccion">';
			echo '<h3 class="titulo"><i class="fas fa-chevron-right icono"></i> ' . $seccion['titulo_modulo'] . '</h3>';
			echo '<div class="contenido">' . $seccion['contenido_del_modulo'] . '</div>';
			echo '</div>';
		}
		echo '</div>';
	}
}
add_shortcode( 'elementor_acf_acordeon', 
'wpc_acf_acordeon_shortcode');

4. Insertamos el Short Code en nuestra plantilla single post con Elementor

[elementor_acf_acordeon]

5. Aplicamos estilo a nuestro acordeón

/* Estilos básicos para el acordeón */
.acordeon {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}

.seccion {
    background-color: #ffffff;
    border-bottom: 1px solid #ccc;
}

.seccion:last-child {
    border-bottom: none;
}

.titulo {
    margin: 0;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    background: #f3f3f3;
    border-bottom: solid 1px #ccc;
    cursor: pointer;
}

.contenido {
    padding: 15px 20px;
    color: #7a7a7a;
    display: none;
    line-height: 2em;
}


/* Estilos para los iconos */
.fa-plus:before {
    content: "\f067"; /* Código del icono '+' en Font Awesome */
}

.fa-minus:before {
    content: "\f068"; /* Código del icono '-' en Font Awesome */
}


/* Icono para el acordeón */
.icono {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    transition: transform 0.3s ease; /* Transición de transformación */
}

.seccion.active .icono {
    transform: rotate(90deg); /* Rotación del icono */
}

6. Aplicamos un script que le permita poder abrir y contraer nuestro acordeón

<script>
// Script para el acordeón
document.addEventListener("DOMContentLoaded", function() {
    var titulos = document.querySelectorAll(".titulo");

    titulos.forEach(function(titulo) {
        titulo.addEventListener("click", function() {
            var seccion = this.parentNode;
            var contenido = seccion.querySelector(".contenido");
            var acordeon = seccion.parentNode;

            // Ocultar todos los contenidos y eliminar la clase 'active' de todas las secciones
            var secciones = acordeon.querySelectorAll(".seccion");
            secciones.forEach(function(seccion) {
                seccion.querySelector(".contenido").style.display = "none";
                seccion.classList.remove("active");
            });

            // Mostrar el contenido de la sección actual y agregar la clase 'active'
            if (contenido.style.display === "block") {
                contenido.style.display = "none";
            } else {
                contenido.style.display = "block";
                seccion.classList.add("active");
            }
        });
    });
});
</script>