@@Arequipatradicional Puedes añadir una clase al div que envuelve el párrafo y ponerle un background-color con el color que quieras. De hecho, esta es una de las razones por las que se recomienda poner un div para envolver el contenido de la respuesta, un saludo!!
@@MoonBin_inthesky Hola! Te recomiendo que lo hagas con otro tipo de etiquetas como y luego uses una lista y dentro los elementos con . Luego, puedes jugar con la propiedad display:none; y después agregar otro display (como display:flex; ) para que se muestre. Si quieres que se muestra haciendo click puedes hacer algo parecido a lo que enseñe en este vídeo ua-cam.com/video/RlysFtDb4iE/v-deo.html
Hola Andres, buena pregunta. Fíjate que este sistema emplea las etiquetas "details" y "summary" de forma nativas en HTML. Es decir, es puro HTML y además, con un mecanismo realmente simple. Por lo tanto, puede servir para cualquier tipo de proyecto, ya sea grande o pequeño. Para acabar, comentarte que siempre puedes comprobar el soporte de los navegadores en la página de caniuse, un saludo!
Hola a todos! Muy buen tutorial ante todo!! Tengo el siguiente problema: Cuando decido introducir la etiqueta entre las etiquetas de , para darle estructura de H3 a las FAQs del desplegable, lo que ocurre es que el icono del desplegable, sea el "+" o la típica flecha, se quedan una línea por arriba del encabezado del acordeón. ¿Alguien puede decirme cómo arreglarlo para que icono y encabezado estén en la misma línea/altura? Muchas gracias de antemano!!
Un crack, como te explicas es maravilloso. Una duda, estoy haciendo un proyecto y me gustaria saber si el boton del "+" se puede cambiar de posición, es decir, que aparezca primero el texto y luego el +.
Investigando, la solución era tan sencilla como utilizar el position con la etiqueta summary. (Recuerden que el contenedor del + es el details, por lo tanto, hay que ponerle un position relaltive y asi posicionar el summary con un position absolute y variar su posicion con left, top, right, entre otros...)
Hola Ricardo, efectivamente, como bien dices en tu comentario, se puede utilizar con un position absolute. Me alegra que lo hayas encontrado, un saludo!
@@maxshoot2848 tienes que poner el contenedor del "+" en position: relative y el "summary" o como de llama la etiqueta del "+" en absolute, de ésta manera puedes posicionar el elemento con las propiedades right, left... Etc.
Hola! Muy claro el video Tengo una duda, quiero poner en summary content un icono, que seria mediante una url. El problema es que el icono me queda muy grande. ¿Hay forma de cambiarle el tamaño?
Hola! Muchas gracias Martin por tu comentario. Para cambiar el tamaño puedes usar la propiedad with o height y el valor (medida) que tu quieras. Por ejemplo, si quisieras que el icono tenga 25px de ancho, haríamos lo siguiente: summary::before{content:(tu-url);width:25px;}. ¡Espero que te sirva!
@@dropcoding Hola! Lo probe de esa forma, pero no funcionó, parece que no se le puede aplicar esa estilo al content. Pero encontré la solución y lo comparto por si alguien tiene el mismo problema que yo: summary::before{ display: inline-block; width: (el tamaño que queramos); height: (el tamaño que queramos); content: ""; background-image:(tu url); background-position: center; background-repeat: no-repeat; background-size:contain; } POR SI QUEREMOS OTRO ICONO CUANDO EL ACORDEÓN ESTÉ ABIERTO details[open] summary::before{ content: ""; background-image:(tu url nueva); }
@@MartinAguirre-ev7xt hola Martin, es verdad, hay que definir el height tmb y aplicarle las propiedades de background. Un saludo y gracias por compartirlo!
Hola! No entiendo tu pregunta, si te refieres a cambiar el "icono de la flecha" por una imagen simplemente tienes que usar la propiedad "content: url(/rutadelaimagen/imagen.jpg);
¿Te ha gustado el vídeo? ¿Tienes alguna pregunta? ¡Déjamelo en los comentarios y te responderé! ⚡
¿Cómo se podría cambiar el color de fondo a la parte del párrafo ? Gracias por el aporte.
@@Arequipatradicional Puedes añadir una clase al div que envuelve el párrafo y ponerle un background-color con el color que quieras. De hecho, esta es una de las razones por las que se recomienda poner un div para envolver el contenido de la respuesta, un saludo!!
@@dropcoding Gracias
Hola 😊 y como seria para un menú( con submenus) sin usar :hover para que despliegue sino dando clic.
Gracias
@@MoonBin_inthesky Hola! Te recomiendo que lo hagas con otro tipo de etiquetas como y luego uses una lista y dentro los elementos con . Luego, puedes jugar con la propiedad display:none; y después agregar otro display (como display:flex; ) para que se muestre. Si quieres que se muestra haciendo click puedes hacer algo parecido a lo que enseñe en este vídeo ua-cam.com/video/RlysFtDb4iE/v-deo.html
Genial... GRACIAS!!! 🥳No solo simple de hacer, sinó que también me quedó muy útil, y a mi juicio, bonito...Gracias nuevamente
Me alegro que te haya quedado bien!! Gracias por pasarte!!
woooo!!! Sin palabras... GENIAL!!!!
Gracias por el comentario!!
yo sere tu seguidor numero mil tranquilo bro, te lo ganaste
Muchas gracias Ivan!! ¡Se podría decir que gracias a ti ya somos 1000!
Amigo, qué buena explicación. Felicidades!!!!
Muchas gracias Alejandro por el cumplido y por pasarte a comentar, un saludo!!
Valla no sabia esto maestro, siempre lo he hecho con puro css. Gracias por el aporte. Saludos de Perú
Gracias a ti por pasarte a comentar, un saludo!
Super claro! Gracias!!!
Gracias a ti Walter, un saludo!
Excelente me sirvió para solucionar un problemón que tenia.
Me alegra de que te sirva Ernesto! Un saludo!!
Gracias pa, me salvaste la vida
Gracias a ti por pasarte a saludar, un saludo!!
Es una buena práctica? Y aplica a proyectos grandes y escalables... Mmm o solo para mini proyectos.
Hola Andres, buena pregunta. Fíjate que este sistema emplea las etiquetas "details" y "summary" de forma nativas en HTML. Es decir, es puro HTML y además, con un mecanismo realmente simple. Por lo tanto, puede servir para cualquier tipo de proyecto, ya sea grande o pequeño. Para acabar, comentarte que siempre puedes comprobar el soporte de los navegadores en la página de caniuse, un saludo!
una locura, buenardo
Gracias!!
Excelente video crackk
Muchas gracias!!!
Hola! consulta, si dentro de la etiqueta div pusiera una imagen funciona igual? o sólo con texto?
Sí, puedes poner una imagen, un saludo!
Hola a todos! Muy buen tutorial ante todo!!
Tengo el siguiente problema:
Cuando decido introducir la etiqueta entre las etiquetas de , para darle estructura de H3 a las FAQs del desplegable, lo que ocurre es que el icono del desplegable, sea el "+" o la típica flecha, se quedan una línea por arriba del encabezado del acordeón.
¿Alguien puede decirme cómo arreglarlo para que icono y encabezado estén en la misma línea/altura?
Muchas gracias de antemano!!
Hola Ian, sin ver el código es realmente difícil averiguar que pasa ¿Es posible que sea otro estilo CSS que afecte al elemento?
Un crack, como te explicas es maravilloso.
Una duda, estoy haciendo un proyecto y me gustaria saber si el boton del "+" se puede cambiar de posición, es decir, que aparezca primero el texto y luego el +.
Investigando, la solución era tan sencilla como utilizar el position con la etiqueta summary.
(Recuerden que el contenedor del + es el details, por lo tanto, hay que ponerle un position relaltive y asi posicionar el summary con un position absolute y variar su posicion con left, top, right, entre otros...)
Hola Ricardo, efectivamente, como bien dices en tu comentario, se puede utilizar con un position absolute. Me alegra que lo hayas encontrado, un saludo!
@@djricardo1998 bro como lo hiciste eso es lo unico q me falta :(
@@maxshoot2848 tienes que poner el contenedor del "+" en position: relative y el "summary" o como de llama la etiqueta del "+" en absolute, de ésta manera puedes posicionar el elemento con las propiedades right, left... Etc.
desde css se pueden cerrar, cuando abres otro
Que solo uno pueda mantener el estado open
Sino recuerdo mal, se puede hacer nativamente en html.
graciaas
Gracias a ti Armando por pasarte, un saludo!
se le puede agregar duracion a la animacion cuando se abre el sumario?
Si que se puede, puedes agregar un animación, con un efecto de transición (con CSS).
Hola! Muy claro el video
Tengo una duda, quiero poner en summary content un icono, que seria mediante una url.
El problema es que el icono me queda muy grande. ¿Hay forma de cambiarle el tamaño?
Hola! Muchas gracias Martin por tu comentario. Para cambiar el tamaño puedes usar la propiedad with o height y el valor (medida) que tu quieras. Por ejemplo, si quisieras que el icono tenga 25px de ancho, haríamos lo siguiente: summary::before{content:(tu-url);width:25px;}. ¡Espero que te sirva!
@@dropcoding Hola!
Lo probe de esa forma, pero no funcionó, parece que no se le puede aplicar esa estilo al content. Pero encontré la solución y lo comparto por si alguien tiene el mismo problema que yo:
summary::before{
display: inline-block;
width: (el tamaño que queramos);
height: (el tamaño que queramos);
content: "";
background-image:(tu url);
background-position: center;
background-repeat: no-repeat;
background-size:contain;
}
POR SI QUEREMOS OTRO ICONO CUANDO EL ACORDEÓN ESTÉ ABIERTO
details[open] summary::before{
content: "";
background-image:(tu url nueva);
}
@@MartinAguirre-ev7xt hola Martin, es verdad, hay que definir el height tmb y aplicarle las propiedades de background. Un saludo y gracias por compartirlo!
hola buen video, se puede cambiar el icono (flecha)?
Hola! Gracias por pasarte. Sí, se puede cambiar la flecha (el icono), de hecho lo explico al final del vídeo 😁👌
@@dropcoding ahh mil disculpas, lo habia pausado para hacerlo e ignore los ultimos mins jaja
@@garyrodriguez4309 no pasa nada! Jeje
Es buenísimo pero como se puede hacer la apertura como si fuera una transición, que se despliegue mas suavemente?
Muchas gracias! Puedes usar una clase dentro de el y usar el efecto de transición.
como serie esto pero con puras imagenes?
Hola! No entiendo tu pregunta, si te refieres a cambiar el "icono de la flecha" por una imagen simplemente tienes que usar la propiedad "content: url(/rutadelaimagen/imagen.jpg);
no logro animar de ninguna manera eso D: algun consejo?
Hola Adixon, hay varias formas de hacerlo. Puedes probar con el selector "details[open]" y pasarloe una animación en la propiedad, un saludo!
Quiero que todo queden en html sin utilizar css
Pues borra todo el css 😂