acf

Creamos el campo con el tipo de campo archivo

2. Cargamos el archivo en nuesto post

3. Creamos el ShotCode para Elementor en el archivo function

// Shortcode to output custom PHP in Elementor
function wpc_acf_file_shortcode( $atts ) {
	$file = get_field('curricula');
	if( $file ){
		echo '<a href="'. $file['url'].'" target="_blank" class="button-32"> Itinerario Formativo </a>';
	}
}
add_shortcode( 'elementor_acf_file', 'wpc_acf_file_shortcode');

4. Insertamos el widget tipo shorcode de elementor en nuestro single post

5. Aplicamos un estilo al widget

/* CSS */
.button-32 {
  background-color: #fff000;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-32:not(:disabled):hover,
.button-32:not(:disabled):focus {
  outline: 0;
  background: #f4e603;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button-32:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}

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>