Question

Buen día gente. Cómo están? Espero que muy bien.
Ojalá puedan ayudarme. Soy nuevo en este foro y creo que me será de mucha ayuda!!!
Les comento tengo que implementar en una web el tipico “toggle” efecto de persiana
que al hacer click me despliegue o me oculte la información correspondi9ente.
Para graficar el tema dejo 2 JPGS. ( por ser user nuevo solo puedo subir un jpg…
pero creo se entiende…) Ojala puedan ayudarme …

A representar son servicios que ofrece esta empresa, estando todos cerrados los banners,
se puede ver en un pantallazo todos lo servicios que ofrece, si se hace click en uno de los
banners simplemente se tiene que abrir esa persiana mostrando el contenido de ese item,
como muestra el jpg.

hacerlo de manera tradicional con los elementos de “toggle” puedo lograrlo,
pero en este caso, el area sensible a click sería toda una imagen (banner) que probablemente
tengo el 100% del ancho de la ventana, o quizás ancho fijo … no lo se aún…

pero no encuentro un plugin que me pueda resolver este tema y no tengo tantos conocimientos
de programación como para poder codificarlo…

Desde ya les super agradezco por la AYUDA!!!
Gran abrazo! Sigan bien y cuidense!

Saludos,
Hugo B.

Comments

Si puedes hacerlo con un toggle normal, ¿porque no lo haces así y los modificas con CSS para las imágenes y demás elementos?

¿Cual es el código que tienes hecho?

---

Peter! Muchas gracias amigo, increible que en menos de un minuto tenga ya una ayuda o comentario ... Te super agradezco!!!!
No tengo hecho código...

Se como resolverlo mediante toggles, te paso un ejemplo de web sonde lo tengo
aplicado el tema con toggles:

https://secvac.com.ar/boletines/

Es que no se como poder aplicar una inagen / banner en esa area sensible a click.
Desde el admin solo me permite agregar un texto y a lo sumo cambiar el icono de toggle...

Será muy complicado, mediante CSS tranformar esa 1er linea en un banner , un jpg??
Nuevamente te super agradezco por la rápida devolución!!!

Que sigas bien amigo!
Hugo B.

Answer 1

Te pongo un ejemplo global de CSS con tu mismo código.

.panel-heading {
background-image: url("https://secvac.com.ar/wp-content/uploads/2018/08/news-foto01GDE.jpg")!important;
}

Solo es cuestión de que pongas una clase o ID para cada uno de los acordeones y le asignes a cada uno su imagen.

Saludos.