DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

etcroot
etcroot

Posted on

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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:
FAQ Collapse Result

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

Regards, etcroot.

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.