Step 1: Editing Accordion Items

Locate the accordionFourItems Array

The questions and answers are defined in the accordionFourItems array:

const accordionFourItems = [
  {
    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

To add more items, include additional objects in the array with unique id values.

Example Update:

Remove Items

Delete any unnecessary objects from the array.

Step 2: Customizing Layout and Styling

Outer Section

The overall layout is defined here:

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

• Add Background or Padding:

<section className="max-w-3xl mx-auto bg-gray-100 py-8 px-4 rounded-lg">

Heading

The heading is customizable using the Heading component:

<Heading as="h3">Accordion Four Component</Heading>

• Change the Heading Text:

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

• Change the Heading Level: Use as="h2" or as="h4" for different semantic levels.

Accordion Buttons

The button that toggles the accordion items is defined here:

<button
  onClick={() => toggleAccordionFour(index)}
  className="w-full text-left py-4 focus:outline-none flex items-center gap-6 px-4"
>

• Add Hover Effects:

• Change Text Color: Modify text-neutral-900 for a different color.

Answer Content

The answer content is styled as follows:

<Paragraph className="text-neutral-300 pb-6 pl-10">
  {item.answer}
</Paragraph>

• Change Font Size or Color:

• Adjust Padding: Modify pb-6 or pl-10 for spacing adjustments.

Step 3: Adjusting Animations

Icon Rotation

The rotation effect is controlled here:

<motion.div
  initial={{ rotate: 0 }}
  animate={{ rotate: index === activeIndex ? 90 : 0 }}
  transition={{ duration: 0.3 }}
  className="text-neutral-800"
>

• Change Animation Duration:

Accordion Expansion

The height and opacity animations for the answer content are defined here:

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

• Adjust Animation Timing:

Step 4: Accessibility Improvements

1. Keyboard Navigation

   • Add aria-expanded and aria-controls attributes to the buttons for better screen reader support.

Example Update:

<button
  onClick={() => toggleAccordionFour(index)}
  className="w-full text-left py-4 focus:outline-none flex items-center gap-6 px-4"
  aria-expanded={index === activeIndex}
  aria-controls={`accordion-panel-${index}`}
>

2. Screen Reader Support

   • Assign unique id values to the answer sections.

Example Update:

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

Step 5: Testing the Component

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

2. Responsive Testing: Resize your 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. Content Clarity:

   • Keep questions concise and answers straightforward.

2. Consistent Design:

   • Match the accordion’s colors, fonts, and spacing with your design system.

3. Image Optimization (if applicable):

   • Use .webp format for faster loading.

Example Accordion Items

const accordionFourItems = [
  {
    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.",
  },
]