/faq-accordion

Primary LanguageHTML

Frontend Mentor - FAQ accordion solution

This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

  • Hide/Show the answer to a question when the question is clicked
  • Navigate the questions and hide/show answers using keyboard navigation alone
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS view-transition API
  • CSS Grid
  • Mobile-first workflow
  • Vite - Development library
  • TypeScript - TypeScript
  • Kevin Powell - Kevin Powell's Youtube

What I learned

By doing this project I evaluated my developement skills and implemented new view transition api to animate from one view to another smoothly wihtout any hassel and involving any library. This project been a great help to implement and test my skills to it. And with the help of CSS grid it's easy to make layout without any extraa node and typescript assertions helps in error safety which is quite good.

//Browser support is not very great so have to use fallback here
if (!document.startViewTransition) {
  listItem.querySelector("p")?.removeAttribute("hidden");
}
document.startViewTransition(() => {
  listItem.querySelector("p")?.removeAttribute("hidden");
});
//can't gave them common view transition name otherwise everything will broke
accordionBtn.forEach((btn, idx) => {
  btn.addEventListener("click", handleEvent);
  let para = btn.nextElementSibling as HTMLParagraphElement;
  para.style.viewTransitionName = `accord-${++idx}`;
});
::view-transition-group(root) {
  animation-duration: 150ms;
}

Useful resources

Author