Bookmark landing page, Accordion || CSS, HTML, JS

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  It is really important to to keep your styles away from your js and html, it is something that you can do by:

  • create a class of the styles that you need to add with your js
  • use js to add the class to your html when needed and remove it when it is not needed.

  element.classList.add("classname") // 
  element.classList.remove("classname")//
  

  Marked as helpful

  0

  ---

  

  Luis Colina•1,043

  @Comet466Posted over 3 years ago

  @ChamuMutezva thanks chamu i used the toggle class to make the change of color instead of add and remove

  1

  

  Renato Marques•130

  @renatomarquescoPosted over 3 years ago

  @Comet466 Hola Luis, me tomo la libertad de hablarte en español. Para cambiar el fill de un svg como por ejemplo las flechitas del la seccion de faq , tenes que meter el codigo svg de la imagen. Si abris el archivo svg en VS Code por ejemplo te va salir un HTML, a esto le tener que cambiar el fill. podes pasar una funcion a JS para que cambies el fill de los elementos ahi dentro(puede ser un circle, un path, lo que sea). No estoy 100% seguro de que esta sea la mejor practica , pero a mi me resulto bien. Esta es mi soucion https://competent-saha-878c77.netlify.app/

  Marked as helpful

  0

  

  Renato Marques•130

  @renatomarquescoPosted over 3 years ago

  @Comet466 Luis, otro punto que note en la seccion de faq es que para mostrar la respuesta cuando uno hace clic a la flechita vos aplicaste display:block a la div con la respuesta. Seria mejor que cambiases la altura de la div, por ejemplo saliendo de 0 al total, para que puedas aplicar transicion, y que el cambio se vea mas fluido y suave...UN abrazo, epsero haber ayudado!

  1

  

  Luis Colina•1,043

  @Comet466Posted over 3 years ago

  @renatomarquesco gracias Renato, por haberte tomado la molestia de haber visto mi codigo y de haberme dado una respuesta tan extendida, curiosamente aplique la tecnica del height:0 en mi menu para moviles pero tienes razon la transicion seria mucho mas fluida si lo utilizara en el accordion tambien, tengo entendido que cambiar estilos desde el Script no es una practica recomendada, porque puede generar problemas de sostenibilidad a largo plazo, ya que sin importar el cambio que hagas en el markup o en la stylesheet el javascript lo ignorara y seguira aplicando las reglas que definistes en el, para proyectos grandes esto seria algo muy malo pero para cosas pequeñas como este layout me tome la libertad de cambiar styles en el JS jeje

  0

  

  Renato Marques•130

  @renatomarquescoPosted over 3 years ago

  @Comet466 Hola Luis, si tenes razon que no se ve buen cambiar el estilo solo por JS , pero lo que podes hacer es el toggle class como hiciste, pero aplicando a la altura. Bueno, estoy empezando tambien asi que todo es muy nuevo para mi tambien. Si queres echale un vistazo a mi solucion y la de otro sproyectos que hice y decime tu feedback, por ahi ves algo en que pueda mejorar yo tambien! un abrazo

  0