FAQ Accordion Card - React and SASS

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted about 4 years ago

  Hi @laura-2035 - Great work on this one! 🙌

  Your solution looks great!! But I'm a bit confused - I was looking forward to seeing how you managed this without JavaScript, but it seems the page requires JavaScript to work? Sorry if I'm missing something here? When I disable JS nothing loads...

  Just a point on your HTML, you might like to consider using the details and summary tags rather than a checkbox inside a div for the questions and answers. I think this would be more semantic, and possibly easier to style.

  I also can't tab through any of the interactive elements on the page, which would be nice to be able to do.

  For animations on the opening and closing without JS, you can do something 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);
  	}
  }
  

  You could replace details[open] summary with input:checked ~ label if you wanted to keep to your current HTML structure, but I'm not 100% sure about the accessibility of that, and the details/summary approach is definitely semantically better.

  Hope this helps - as I said your solution looks great so this is really some 'behind the scenes' stuff to think about.

  Cheers 👋 and great work on this one!

  20
• 

  matiussi•155

  @matiussi

  Posted about 4 years ago

  Hello @dwhenson o/ Thanks for the feedback!!!

  I forgot to mention that I generated the FAQ list using JS (just to test the map() in .jsx files) 😅

  I never heard about the summary and details tags before, it's way better than using label and checkbox, and easier to style as you mentioned.

  I also appreciate the opening animation!! Now the FAQ seems more visually appealing!

  Have a wonderful day 😁😁😁

  11