CSS only FAQ accordion

Community feedback

• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  nice job completing the optional challenge 👍

  I only see one issue:

  • if all the accordion tabs are opened, the content overflows the card (this is because you have a fixed height set on your card)

  Marked as helpful

  1

  ---

  

  Spencer Runde•640

  @spencerrundePosted about 3 years ago

  @ConradMcGrifter Thank you Conrad! Removed the fixed height and tweaked the images to compensate.

  0
• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Nice one @spencerrunde - looks great. 🙌

  Yes, as Conrad, pointed out, the fixed height on the card is causing some overflow issues at the moment. Generally it's best not to set heights if it can be avoided as these issues often happen when you do.

  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.

  This also has the advantage of including keyboard functionality and allow the key elements to be focusable automatically. This is currently missing from your solution and as a result people can't navigate or use the component with a keyboard, which is not ideal.

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

  The styling of these elements can seem a bit complicated at first, but there are some good resources out there. The page is a bit of a mess but I have found the following page to be a pretty good guide in how to style things, including the triangle indicator: https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999

  Hope this helps

  Cheers 👋

  Dave

  Marked as helpful

  0