FAQ accordion card solution WORK IN PROGRESS

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted over 3 years ago

  Hey @elsimater lovely work on this one! 🙌 The site looks great!

  One thing that really helped me with this one was the use of the details and summary HTML elements. This would be more semantic and easier to implement than using the buttons and `div's with set heights as you have a at the moment.

  This also has the advantage of including keyboard functionality and allow the key elements to be focusable automatically. The details and summary have much of the functionality baked in and can be styled with a little bit CSS work.

  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. Although there are some inconsistencies with Safari, it's not too bad. I am also battling with this at the moment in another challenge!

  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 help! Not an easy one this for sure!!

  Keep up the good work! 👍

  Cheers 👋

  Dave

  21

  Marked as helpful
• 

  Marcus Hugo•365

  @marcus-hugo

  Posted over 3 years ago

  Looks good!

  I noticed the box svg is not centered when the accordion expands. You could try setting the .wrapper to align-items: baseline and then set the box svg position top: 7.4rem

  hope this helps!

  02

  Marked as helpful