Simple FAQ Collapse

Was in the process of making collapsable divs with NextJS when building a FAQ page so I figured I’d share it here with you guys aswell!

Libraries used:

• React-Icons
• TailwindCSS
• React

So for starters I made a FAQ component which I put inside /components, this is the resulting code:

import { RiQuestionLine } from "react-icons/ri";
import { useState } from "react";

export function FaqList(props) {
  return <div className="faq-list">{props.children}</div>;
}

export function FaqItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq-item">
      <div onClick={() => setOpen(!open)} className="faq-header">
        <div className="faq-icon-wrap">
          <RiQuestionLine className="faq-icon" />
        </div>
        <h3 className="faq-title">{props.title}</h3>
      </div>
      {open && (
        <div className="faq-body">
          <p className="faq-text">{props.children}</p>
        </div>
      )}
    </div>
  );
}

And then I import the respective component into my FAQ page to be able to build the FAQ’s, and this code is structured like this:

<FaqList>
    <FaqItem title="Why is the apprentice role prioritised in developer list?">
      Because we believe in giving apprentice developers a chance to get a
          foot into the industry.
    </FaqItem>
    <FaqItem title="What is this?">
      This is a demo of the ReactJS framework.
    </FaqItem>
</FaqList>

Here’s the CSS:

/* FAQ COMPONENT */
  .faq-list {
    @apply flex flex-col space-y-2;
  }
  .faq-item {
    @apply flex flex-col gap-2;
  }
  .faq-header {
    @apply flex items-center gap-2 cursor-pointer bg-indigo-100 rounded-md p-2 select-none;
  }
  .faq-icon-wrap {
    @apply flex items-center justify-center p-1.5 rounded-md bg-indigo-500 text-white;
  }
  .faq-icon {
    @apply w-4 h-4;
  }
  .faq-title {
    @apply font-medium text-indigo-500;
  }
  .faq-body {
    @apply flex flex-col gap-2 py-3 px-5;
  }
  .faq-text {
    @apply text-xs italic text-gray-700 max-w-3xl;
  }

Keep in mind that you will need to use Tailwinds built in compiler using postcss and so on so you’ll be able to use the @apply function inside of your css. This will also only work in globals.css and not the module based css files.

The result should be something like this:

Feel free to correct me below if I’ve said something wrong or if you want to give feedback to this.

Regards, etcroot.