FAQ accordion card challenge [CSS ONLY]

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  Wow @azizbna you've done a great job here. It took me quite a while to work out how you got this working! I'm still not sure I've got it 100%! It seems like you've got the functionality down really well, which is great, including keyboard focus states which is also often missed on this challenge.

  One possible issue, is the use of the text in the pseudo elements. This works visually, but I'm not sure that it would be accessible to screen readers? You could add this back into the main HTML and use some aria attributes to hide/show things as needed.

  But I would actually suggest, using the details and summary HTML elements that have much of the functionality baked in and can be styled with a little bit CSS work. You've kind of created much of this yourself, but this would be more robust.

  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);
  	}
  }
  

  So still no need for any JS.

  But great job here! I imagine it was a lot of work getting this sorted out!

  Cheers Dave

  Marked as helpful

  2

  ---

  

  AzeezBNA•70

  @azizbnaPosted almost 3 years ago

  Hello @dwhenson!

  First of all, thank you so much for taking the time to reply , I really appreciate it!

  Funny thing is, I actually knew there was a sort of drop down context menu built into HTML, but I couldn't for the life of me remember what it's called, even googling it didn't help because frankly I didn't know what to write, so I ended up using the <button> tag to achieve that effect.

  With the information I know now (Thanks to you) I might try to redo this in the future ,to make it more accessible ,but for now I'm gonna leave it as is because honestly working with the Illustrations is always a nightmare for me (I'd say they took more time to set than the main content) and the slightest change in sizing will mess up the positioning 😄.

  Again, thanks so much for the feedback, Have a nice day!

  1