FAQ accordion card solution WORK IN PROGRESS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 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

  Marked as helpful

  2

  ---

  

  Alessandro•215

  @alessandro-giuzioPosted about 3 years ago

  @dwhenson Wow Dave, thank you for your help, really appreciate the details in your answer, i will have a look right now.

  Best wishes

  1
• 

  Marcus Hugo•365

  @marcus-hugoPosted about 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!

  Marked as helpful

  0

  ---

  

  Alessandro•215

  @alessandro-giuzioPosted about 3 years ago

  @marcus-hugo Thank you for your advice Marcus!

  0

  

  Marcus Hugo•365

  @marcus-hugoPosted about 3 years ago

  @alessandro-giuzio Your welcome!

  0