FAQ accordion card (CSS-only :0) with box animation on desktop

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really good and that box animation is really cool as well. The mobile layout is great as well, for the responsive state, maybe try to center the content, since at point 1100px going down, the content is on the left, stagnant.

  For your question:

  • Nope, it is totally fine, it won't affect SEO since the content is still present, try viewing the page source of your site, if all the contents are there, you're good.

  Some other suggestions would be:

  • Don't use position: absolute on the main element, to be honest, you don't need that on this one, this just makes it harder to maintain, as element using this goes out of the flow and you don't want a large container like main to be one. You could remove all the:

  left
  top
  transform
  position
  

  property on the main element, to make it centered, if that's what you want, you only need margin: 0 auto then add some padding to the top and bottom of the body tag, so that it won't touch the ceiling and flooring.

  • For this one, I wouldn't really use input type="checkbox" for this one, if I would ignore javascript, I would have use details element. By using this, you don't have to manipulate the aria-expanded and the content inside it will be totally hidden and will only be visible when the details element is toggled, this means more accessible than just using checkboxes.
  • Since you are using checkbox, to make it better, add the visibility: hidden on the answer selector, this makes it totally hidden for all users like what it should be, then when the input is selected, you add visibility: visible on that selector, to make the element appear.
  • Also, do not add display: none to the input element, this makes it not target-able by other users, you can click on the label but if you use keyboard or other assistive tech, you can't really toggle it. Add sr-only element to the checkbox only so that it will still be visible for peripherals but not for screen itself. Then add a visual indicator on it, make like using input:checked ~ .faq-question .answer:focus-visible using this selector, you could target the answer selector, then add a indicator on it.

  Aside from those, great work on this one again,.

  Marked as helpful

  1

  ---

  

  willykleitinho•350

  @willykleitinhoPosted about 3 years ago

  @pikamart Hey, Raymart! I really appreciate you taking the time to see my code and making suggestions on it. I'll definitely think and learn more about what you said and make changes to the code in this week or the next. Thank you!!

  0