FAQ Sections

Accordion Three

Accordion Three

Accordion Three

This tutorial provides step-by-step instructions for customizing the AccordionThree component. You’ll learn how to:

  1. Edit or add accordion items (questions and answers).

  2. Modify the layout and styling (headings, buttons, and content).

  3. Enhance animations for a smoother experience.

  4. Ensure responsiveness and accessibility.

Project Resources

Tailwindcss

Framer Motion

Component Locked - Upgrade to a plan

Component Locked - Upgrade to a plan

Tutorial

Step 1: Editing Accordion Items

Locate the accordionItems Array

The content for the accordion is defined in the accordionItems array:

const accordionItems = [
  {
    id: 1,
    question: "What makes Lorem Ipsum unique?",
    answer: "Duis eget nunc pretium, ornare tortor sed, commodo nisl...",
  },
  ...
]

Edit Existing Items

  • Question (question): Update the text for the question.

  • Answer (answer): Provide your custom response.

Example Update:

Add New Items

Add more items by creating new objects with unique id values.

Example Update:

Remove Items

Delete any unnecessary items from the array.

Step 2: Customizing Layout and Styling

Outer Section

The main section is defined as follows:

<section className="max-w-7xl mx-auto">

  • Add Background or Padding:

<section className="max-w-7xl mx-auto bg-gray-50 py-12 px-6">

Heading and Introduction

The left column contains a heading, a paragraph, and a button:

<div className="pb-16 flex flex-col gap-4">
  <Heading as="h2">Accordion Component</Heading>
  <Paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit...</Paragraph>
  <Button variant="link" color="neutral">Learn More &rarr;</Button>
</div>

  • Change Heading Text:

<Heading as="h2">Frequently Asked Questions</Heading>

  • Edit Button Text and Behavior: Replace "Learn More &rarr;" and its action.

Example Update:

<Button variant="solid" color="primary" href="/faq">Explore FAQs</Button>

Accordion Questions and Answers

The right column contains the accordion items:

<div className="flex flex-col w-full gap-6">

  • Change Borders and Spacing:

<div className="flex flex-col w-full gap-4 border-l-2 pl-4">

Step 3: Adjusting Animations

Icon Rotation

The rotation of the plus/cross icon is defined here:

<motion.div
  initial={{ rotate: 0 }}
  animate={{ rotate: index === activeIndex ? 90 : 0 }}
  transition={{ duration: 0.3 }}
>
  {index === activeIndex ? <Cross1Icon /> : <PlusIcon />}
</motion.div>

  • Adjust Speed:

Accordion Expansion
The opening and closing animation for answers is controlled by this block:
<motion.div
  initial={{ height: 0 }}
  animate={{
    height: index === activeIndex ? "auto" : 0,
    opacity: index === activeIndex ? 1 : 0,
  }}
  transition={{ duration: 0.4 }}
>
  • Change Transition Timing:
Step 4: Accessibility Enhancements
  1. Keyboard Navigation
    • Add aria-expanded and aria-controls attributes to the buttons for better screen reader support.
Example Update:
<button
  onClick={() => toggleAccordion(index)}
  className="w-full text-left py-4 focus:outline-none flex items-center justify-between"
  aria-expanded={index === activeIndex}
  aria-controls={`accordion-panel-${index}`}
>
  1. Screen Reader Support
    • Assign unique id values to the answer containers.
Example Update:
<motion.div
  id={`accordion-panel-${index}`}
  ...
>
Step 5: Testing the Component
  1. Run Locally: Use npm run dev to preview the changes.
  2. Responsive Testing: Resize the browser to verify proper behavior on mobile, tablet, and desktop.
  3. Accessibility Testing: Use a screen reader and keyboard to navigate the accordion.
Best Practices
  1. Concise Content:
    • Keep questions short and easy to understand.
    • Provide clear and relevant answers.
  2. Consistent Styling:
    • Ensure the accordion matches your overall design system.
  3. Image Optimization (if applicable):
    • Use .webp or compressed formats for fast loading.
Example Customized Accordion Items
const accordionItems = [
  {
    id: 1,
    question: "What is UI Now?",
    answer: "UI Now provides pre-designed components to help startups build platforms quickly.",
  },
  {
    id: 2,
    question: "How do I use these components?",
    answer: "Download components, integrate them into your project, and customize as needed.",
  },
  {
    id: 3,
    question: "Is UI Now beginner-friendly?",
    answer: "Yes, all components include tutorials to guide you through the process.",
  },
]