FAQ Accordion Card with HTML, CSS and Vanilla JS

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅instead of this loop, you can hide all these items at once

  //first loop to set property display = none to all faqs answers (<p>)
  for(faqs of faq) {
  	faqs.style.display = 'none';
  }
  

  ✅instead of setting inline styles, it is better to set classes

  if(faq[i].style.display == 'none') {
  	faq[i].style.display = 'block';
  	arr[i].style.fontWeight = 'bold';
  	icon[i].style.transform = 'rotate(0.5turn)';
  } else {
  	faq[i].style.display = 'none';
  	arr[i].style.fontWeight = 'normal';
  	icon[i].style.transform = 'rotate(1turn)'; //rotate the arrow icon when the user click on button
  }
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  1

  ---

  

  Gilberto Fernández•60

  @gfernan24373Posted over 2 years ago

  @isprutfromua Thanks again for your tips. In the css file I already set the display to none for the <p> tags but I don't know why this property and all the others are not inicialized when I using in the JS file. That's the reason why I reset the propertie value with the for loop. I'm gonna learn how to hide all these items at once and avoid using for loops.

  llmmll,,

  0