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.
Top comments (0)