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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Users should be able to:

• ✔️ View the optimal layout for the component depending on their device's screen size
• ✔️ See hover states for all interactive elements on the page
• ✔️ Hide/Show the answer to a question when the question is clicked

In plus, I add a small animation in the box illustration to add more dynamism.

• Solution URL: GitHub Repository
• Live Site URL: GitHub Pages

• Mobile-first workflow
• Semantic HTML5 markup
• CSS3 custom properties
• Flexbox Layouts
• Powered by Sass/SCSS
• BEMIT Arquitecture
  • ITCSS
  • BEM

I use Sass variables in conjunction with CSS variables to work with the best of both worlds.

To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.

Read more about Breaking Change: CSS Variable Syntax

/* SCSS Variables*/
@use "sass:meta";

/* Font-family */
$font-family: "Kumbh Sans", sans-serif;

/*	Colors	*/
$dark-blue: hsl(238, 29%, 16%);
$soft-red: hsl(14, 88%, 65%);
$soft-violet: hsl(273, 75%, 66%);
$soft-blue: hsl(240, 73%, 65%);

/* CSS Custom properties */
:root {
	/* Font-family */
	--font-family: #{$font-family};

	/* Colors */
	--dark-blue: #{$dark-blue};
	--soft-red: #{$soft-red};
	--soft-violet: #{$soft-violet};
	--soft-blue: #{$soft-blue};
}

With this attribute, Elemet.scrollHeight we achieve the animation to expand and collapse the FAQ answers.

// ./js/behaviour.js
53. articleAnswer[0].style.height = `${articleAnswer[0].scrollHeight}px`;

This is the skeleton for creating a component for the new FAQ articles:

<article id="article__01" class="faq__article" tabindex="1" accesskey="1">
	<h2 class="faq__article-title">How many team members can I invite?</h2>
	<div class="faq__article-answer">
		<p>
			You can invite up to 2 additional users on the Free plan. There is
			no limit on team members for the Premium plan.
		</p>
	</div>
</article>

The next step is to convert this FAQ accordion into a web component with the help of LIT, a simple library for building fast, lightweight web components.

• Sass - A stylesheet language that’s compiled to CSS

• ITCSS - Managing CSS Projects with ITCSS

• BEM - Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

• LIT element - Simple & Fast Web Components.

• Responsive Accordion - Video to inspire a Responsive Accordion Ui Design Using HTML CSS & JavaScript. - THX 2 Bedimcode

• Frontend Mentor - @terremotoBCN
• Github - @terremotoBCN
• Twitter - @terremotoBCN
• WordPress - @terremotobcn
• Tumblr - @terremotobcn

Many thanks to Frontend Mentor and its fantastic community that allows us to grow and improve as Frontend developers.