Esta semana en un proyecto web que estoy haciendo he necesitado un componente que no he encontrado en ningún plugin existente, o no hay o no está fácil de encontrar.
Se trata de un acordeón, te explico que es un acordeón que caracteristicas tiene y como lo he montado
Te hablo sobre GenerateBlocks sus Local Templates y el plugin de Code Snippet
Y te cuento la función Javascript con que he hecho la interacción y el CSS que he utilizado
En el CCS cambio los punteros cuando el ratón está sobre las cabeceras de imagen. En cuanto a la programación se trata de hacer una función que haga de conmutador, si el panel de contenido de la cabecera en la que se hace clic está cerrado que se abra, expandiendo el contenido
Básicamente lo que se hace es evaluar el evento clic de ratón, se añade la clase CSS .toggled al elemento sobre el que se ha hecho clic se añade la clase .rotated al icono de flecha hacia abajo que hay en la cabecera sobre la que se ha hecho clic. De esta forma, puedo poner en el CSS que el icono de la flecha se gire 180 para la clase .rotated, y como pongo y quito la clase con las función que evalúa el clic, un clic hacer que la flecha se rote y otro clic hace que vuelva a su estado inicial.
Para desplegar el panel de contenido de cada cabecera, sólo puede haber un objeto debajo de cada cabecera por eso puse un contenedor y le di la clase CSS .click, para poder seleccionar luego el contenido por esa clase
Cambio la altura del contenedor para que se expanda y su opacidad de 0 que es en el estado que está cuando se esconde y ponemos a 1 cuando queremos enseñarlo
Fijamos la altura en pixels de contenedor igual a la altura de la pantalla en la que tenemos abierta la pagina web así damos el tamaño adecuado al contenido
hago un pequeño scroll hacia abajo para ayudar al usuario a entender que un elemento se ha abierto debajo de la cabecera para evitar que en algunos tamaños de pantalla el efecto sea tan solo que la flecha se rota
Que se pueda ver qué ha pasado algo más y que algo se ha desplegado debajo de la cabecera
Con esta sencilla función tenemos todo lo necesario para hacer que al pinchar sobre una de las imágenes en la cabecera se abra el contenido que corresponde a esta cabecera y se muestre el contenedor con todo lo que hayamos puesto en el
Contar la idea de usar Telegrampara hacer comunidad
Quiero aprovechar este episodio para pediros un favor, quiero animaros a apuntaros al Canal de Telegram de la comunidad Ingeniosos de Sistemas, que es completamente gratuito y donde iré publicando contenidos y también encuestas para pediros feedback y opiniones sobre lo que vayamos implementando en la comunidad
https://tecnolitas.com/telegram
Para contarme alguna idea para un episodio o darme tu opinión sobre Tecnolitas o la comunidad de ingeniosos de sistemas, te dejo este enlace en el que puedes contactar