🚀 Compartimos este efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.

				
					<div class="slider">
   <div class="slide" style="background-image: url('https://elsaltoweb.es/wp-content/uploads/2024/12/maradona.webp');">
    <div class="slide__text">
      <p class="name">Maradona</p>
      <p class="description">Posición: Mediocampista ofensivo / Delantero.
Características: Considerado uno de los mejores jugadores de la historia. Su habilidad con el balón, regate, visión de juego y liderazgo fueron legendarios. Fue protagonista de momentos icónicos como el "Gol del Siglo" y la "Mano de Dios" en el Mundial de 1986, donde lideró a Argentina al título.
Logros destacados:
Campeón del Mundo 1986.
Ganador de múltiples títulos con clubes como Napoli y Barcelona.</p>
    </div>
  </div>
   <div class="slide" style="background-image: url('https://elsaltoweb.es/wp-content/uploads/2024/12/messi.webp');">
    <div class="slide__text">
      <p class="name">Messi</p>
      <p class="description">Posición: Delantero / Extremo / Mediocampista ofensivo.
Características: Conocido por su increíble habilidad técnica, precisión en los tiros libres, regate y visión de juego. Es el máximo goleador histórico del FC Barcelona y uno de los jugadores más laureados de todos los tiempos.
Logros destacados:
Campeón del Mundo 2022.
Siete veces ganador del Balón de Oro.
Múltiples títulos con el Barcelona (Champions League, La Liga).
Ganador de la Copa América 2021.</p>
    </div>
  </div>
   <div class="slide" style="background-image: url('https://elsaltoweb.es/wp-content/uploads/2024/12/pele.webp');">
    <div class="slide__text">
      <p class="name">Pelé</p>
      <p class="description">Posición: Delantero.
Características: Considerado una de las mayores leyendas del fútbol, Pelé combinaba una gran técnica, potencia y capacidad goleadora. Es conocido como "O Rei" (El Rey) por su impacto en el fútbol mundial.
Logros destacados:
Tres veces campeón del mundo (1958, 1962, 1970).
Máximo goleador histórico de la selección brasileña.
Múltiples títulos con el Santos FC.</p>
    </div>
  </div>
    <div class="slide" style="background-image: url('https://elsaltoweb.es/wp-content/uploads/2024/12/matheus.webp');">
    <div class="slide__text">
      <p class="name">Matthäus</p>
      <p class="description">Posición: Mediocampista / Líbero.
Características: Jugador completo con gran capacidad defensiva y ofensiva. Fue líder de la selección alemana durante varios años.
Logros destacados:
Campeón del Mundo 1990.
Mejor Jugador del Año de la FIFA 1991.
Títulos con el Bayern Múnich e Inter de Milán.</p>
    </div>
  </div>
    <div class="slide" style="background-image: url('https://elsaltoweb.es/wp-content/uploads/2024/12/cavani.webp');">
    <div class="slide__text">
      <p class="name">Cavani</p>
      <p class="description">Posición: Delantero.
Características: Delantero completo con gran físico, capacidad goleadora y juego aéreo destacado. Ha sido fundamental en la selección uruguaya y varios equipos europeos.
Logros destacados:
Campeón de la Copa América 2011.
Máximo goleador histórico del Paris Saint-Germain (antes de ser superado).
Múltiples títulos de liga en Francia y participaciones destacadas en la Serie A (Italia) y la Premier League.</p>
    </div>
  </div>
</div>
<script>
    
    const items = document.querySelectorAll(".slide");

const expand = (item, i) => {
  //remove active from all the other items
  items.forEach((it, ind) => {
    if (i === ind) return;
    it.clicked = false;
    it.classList.remove("active");
  });
  //toggle the item clicked
  item.clicked = !item.clicked;
  //add the active class to the element clicked
  if(item.clicked) {
    item.classList.add("active");
  }
};

items.forEach((item, i) => {
  item.clicked = false;
  item.addEventListener("click", () => expand(item, i));
});

    
</script>