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>
Deja una respuesta