Step 1: Adding or Editing Accordion Items

Locate the accordionItems Array

The accordion questions and answers are 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

Replace the question and answer values with your desired text.

Example Update:

Add New Items

Add additional objects to the array, ensuring each has a unique id.

Example Update:

Remove Items

Delete any unnecessary objects from the array.

Step 2: Modifying Appearance

Styling the Component

The component uses Tailwind CSS for styling. You can modify these classes to change the appearance:

1. Container Styling:

   • Update the outermost container for spacing and layout.

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

   • Example: Add background color and padding.

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

2. Question Button:

   • Modify the button styling for different fonts, colors, or hover effects.

   • Example: Add hover effects and change text color.

3. Answer Content:

   • Update the content container (motion.div) for padding or text styles.

   • Example: Change font size and color.

Step 3: Adjusting Animations

Icon Rotation

The icon rotation effect is defined here:

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

• Change Duration: Update duration to make the animation slower or faster.

Example Update:

Answer Expansion

The height and opacity animations are controlled here:

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

• Adjust Transition Speed:

  • Change duration to control the speed of the accordion opening/closing.

Example Update:

Step 4: Accessibility Improvements

Keyboard Navigation

Ensure keyboard users can navigate and interact with the accordion:

• Add aria-expanded and aria-controls attributes to the button.

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}`}
>

• Update the answer container with a unique id:

<motion.div
  id={`accordion-panel-${index}`}
  initial={{ height: 0 }}
  ...
>

Screen Reader Support

• Add aria-label to the button for descriptive labels.

Step 5: Testing the Component

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

2. Test Responsiveness: Ensure the accordion adjusts properly on mobile, tablet, and desktop screen sizes.

3. Check Accessibility: Test keyboard navigation and screen reader functionality.

Step 6: Best Practices

1. Keep Content Concise:

   • Avoid lengthy text in the question or answer fields for better readability.

2. Consistent Styling:

   • Ensure the accordion matches your site’s overall design system.

3. Maintain Unique IDs:

   • Each item in the accordionItems array should have a unique id to avoid key duplication errors.

Example Customized Accordion

Here’s a simplified example of a fully customized accordion:

const accordionItems = [
  {
    id: 1,
    question: "What is UI Now?",
    answer: "UI Now is a platform offering beautiful, ready-to-use components for SaaS startups.",
  },
  {
    id: 2,
    question: "How do I get started?",
    answer: "Simply download the components, customize them, and integrate them into your project.",
  },
  {
    id: 3,
    question: "Is UI Now beginner-friendly?",
    answer: "Yes, all components come with step-by-step tutorials for easy integration.",
  },
]