Step 1: Editing Accordion Items

Locate the accordionFiveItems Array

The accordion content is stored in the accordionFiveItems array. Each item includes fields for question text, answer text, and styling properties.

const accordionFiveItems = [
  {
    id: 1,
    question: "Information",
    answer: "Duis eget nunc pretium, ornare tortor sed, commodo nisl...",
    backgroundColor: "bg-white",
    fontColor: "text-neutral-900",
    iconColor: "text-neutral-900",
  },
  ...
]

Edit Existing Items

• question: The text displayed on the accordion button.

• answer: The text displayed when the section is expanded.

• backgroundColor, fontColor, and iconColor: Control the visual styles for each item.

Example Update:

Add New Items

Add a new object to the accordionFiveItems array with a unique id.

Example Update:

Remove Items

Delete any objects you don’t need from the array.

Step 2: Customizing Layout and Appearance

Outer Section

The container for the accordion is styled as follows:

<section className="h-screen w-full flex items-center justify-center">

• Add Padding or Background Color:

<section className="h-screen w-full flex items-center justify-center bg-gray-50">

Accordion Items

Each accordion item’s styling is determined by dynamic classes:

• Change Background Color: Modify backgroundColor in the accordionFiveItems array.

• Adjust Border Styling:

Text Styling

• The question text uses the Display component:

<Display className={`font-normal ${item.fontColor}`}>
  {item.question}
</Display>

• The answer text uses the Heading component:

<Heading className={`font-extralight pb-4 ${item.fontColor}`}>
  {item.answer}
</Heading>

• Update Typography Styles:

Icons

The plus and cross icons dynamically change based on the active state:

<motion.div
  initial={{ rotate: 0 }}
  animate={{ rotate: index === activeIndex ? 90 : 0 }}
  transition={{ duration: 0.3 }}
  className={`${item.iconColor}`}
>

• Change Icon Size or Color:

<PlusIcon className="h-6 w-6 text-blue-600" />
<Cross1Icon className="h-6 w-6 text-blue-600" />

Step 3: Adjusting Animations

Expand/Collapse Animation

The accordion’s height and opacity animations are controlled here:

<motion.div
  initial={{ opacity: 0, height: 0 }}
  animate={{
    opacity: index === activeIndex ? 1 : 0,
    height: index === activeIndex ? "auto" : 0,
  }}
  transition={{ duration: 0.4 }}
>

• Change Animation Duration:

Icon Rotation

Icons rotate to indicate the open/close state:

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

• Slow Down Rotation:

Step 4: Accessibility Enhancements

1. Keyboard Navigation

   • Add aria-expanded and aria-controls attributes for better screen reader support:

<button
  onClick={() => toggleAccordionFive(index)}
  className="w-full text-left focus:outline-none flex items-center justify-between p-8"
  aria-expanded={index === activeIndex}
  aria-controls={`accordion-panel-${index}`}
>

2. Screen Reader Support

   • Assign a unique id to the answer containers:

<motion.div
  id={`accordion-panel-${index}`}
  ...
>

Step 5: Testing the Component

1. Run Locally: Use npm run dev to preview changes.

2. Responsive Testing: Check the accordion on mobile, tablet, and desktop.

3. Accessibility Testing: Ensure smooth navigation via keyboard and screen reader.

Best Practices

1. Content Clarity:

   • Use concise and clear text for question and answer.

2. Styling Consistency:

   • Ensure colors and fonts match your project’s design system.

3. Responsive Design:

   • Verify that the accordion works well across all screen sizes.

Example Accordion Items

const accordionFiveItems = [
  {
    id: 1,
    question: "What is UI Now?",
    answer: "UI Now offers pre-designed components for startups to build faster.",
    backgroundColor: "bg-gray-50",
    fontColor: "text-gray-800",
    iconColor: "text-blue-600",
  },
  {
    id: 2,
    question: "How do I use these components?",
    answer: "Simply download, integrate, and customize them as needed.",
    backgroundColor: "bg-gray-100",
    fontColor: "text-gray-700",
    iconColor: "text-gray-800",
  },
]