FAQ Accordion Card

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  hey @namankandol - nice work on this one and your JS works well 🙌 although some of those selectors look a bit fragile and if you changed anything in the mark up they would stop working.

  For this challenge, I'd actually try and avoid JS entirely. 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.

  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
• 

  Naman Kandol•250

  @namankandolPosted about 3 years ago

  Thanks a lot, sir, for such a detailed suggestion. I will look up to your suggestions for sure 😁

  0