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.

Blog

etcroot

Join Our Newsletter. No Spam, Only the good stuff.

Related