FAQ Accordion Simple Javascript

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  hey @priopambudi nice work on this one. It looks good responds nicely, and functions well. Here are a few things you might like to consider:

  1. I prefer to avoid JS where possible. One thing that really helped me with this one was the use of the details and summary HTML elements. These have much of the functionality baked in and can be styled with a little bit CSS work.

  2. This would also have the advantage of including keyboard functionality and allow the key elements to be focusable automatically. This is missing at present so I can only use my mouse to open the elements.

  3. If you went with this approach you can also animate the opening and closing pretty simply using some code like:

  details[open] summary ~ * {
  	animation: sweep 0.2s ease-out;
  	will-change: opacity, transform;
  }
  
  @keyframes sweep {
  	0% {
  		opacity: 0;
  		transform: translateY(-1em);
  	}
  
  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }
  

  If you add in some outline styles I think this would leave you with a pretty robust, and accessible component. But, all that aside, you've done a great job here, and positioning all those images is not easy! Nice one 👍

  Hope this helps a little.

  Cheers 👋

  1

  ---

  

  Dev Monkey•100

  @priopambudiPosted over 3 years ago

  @dwhenson You really are very kind. At first I considered not using javascript. But after trying it, I couldn't do it. Finally I decided to use javascript at the same time to learn, because I'm still a beginner. Thank you very much for your advice. I'll try later. Thank you so much!

  0