FAQ according card using only HTML & SCSS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Hey @rabahmilano this is a lovely solution and it looks great 🙌 great that you implemented it without JS too 👍.

  I've added a few points below that you might like consider for how you could improve it. As you will see they mostly relate to non-visual stuff as I think you've nailed 🔨 reproducing the component visually. 🥳

  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 is a good thing to consider.

  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

  You will also notice that we are only animating opacity and transform properties. These rules are rendered last by CSS on the page so changing them has the least impact on performance. Combined with the animation above hopefully this should make things reasonable smooth...

  If you did try all this, I'd then finish of the component with some custom outline styles, and you'd then have a great looking, progressively enhanced, accessible component... Custom outlines are no trouble once the HTML is solid, but I've gone on long enough, so just let me know if you would like an additional info on them...

  Hope this helps!

  Cheers 👋

  Dave

  Marked as helpful

  3

  ---

  

  Rabah•380

  @rabahmilanoPosted about 3 years ago

  @dwhenson First of all I thank you for your time that you have devoted to take a look at my solution Secondly I thank you again for the suggestion you made to me, and which I will start working on it, And I want to inform you that I am very open to other suggestions cordially

  0