Accordion

The Accordion component provides a collapsible section to display content. It toggles between showing and hiding content when clicked, making it ideal for FAQ sections, descriptions, or other expandable content areas.

Props

Prop	Type	Description
title	string	The title of the accordion, displayed in the header area.
content	any	The content displayed within the accordion when expanded, allowing for text or HTML elements.

Dependencies

• React Icons: Uses CiCirclePlus to display an icon that indicates expandable content, with a rotation animation to show the current state (open or closed).

Key Style Classes

• Accordion Header:

  • h-[60px] flex items-center border-t border-neutral-800: Sets the height and border styling of each accordion header.

  • hover:bg-neutral-950 cursor-pointer: Adds a hover effect to enhance user interactivity.

  • Text Color: text-emerald-500 when open, and text-white when closed for clear visual feedback.

• Expandable Content:

  • overflow-hidden transition-all duration-300 ease-in-out: Smoothly toggles the accordion’s content visibility, adjusting max height and opacity to animate expansion and collapse.

  • p-4 font-light text-neutral-500: Styles the content with padding and a light font weight for readability.

Usage Example

// Example usage of Accordion component within a Faq section or similar layout
<Accordion
  title="What is the refund policy?"
  content="You have 30 days to request a refund from the date of purchase."
/>

Additional Notes

• Height Management:

  • The height of the accordion content is dynamically adjusted based on scrollHeight, using a ref (contentRef) and the open state to ensure smooth expansion and collapse.

• Toggle Animation:

  • The icon’s rotation (by rotate-45 when open) provides visual feedback on the accordion’s state, making it clear to users when content is expanded or collapsed.

• Expandable Content Flexibility: The content prop can include any type of element, enabling this component to handle both text and more complex HTML structures as needed.

---

This entry should cover all essential aspects of the Accordion component.