Accordion A vertically stacked set of interactive headings that each reveal an associated section of content.
Made by imskyleen
< Accordion type = "single" > < AccordionItem > < AccordionTrigger >Accordion Item 1</ AccordionTrigger > < AccordionContent >Accordion Content 1</ AccordionContent > </ AccordionItem > < AccordionItem > < AccordionTrigger >Accordion Item 2</ AccordionTrigger > < AccordionContent >Accordion Content 2</ AccordionContent > </ AccordionItem > < AccordionItem > < AccordionTrigger >Accordion Item 3</ AccordionTrigger > < AccordionContent >Accordion Content 3</ AccordionContent > </ AccordionItem > </ Accordion > The choice made is the same as Radix UI, i.e. to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Accordion content to be taken into account by Google, please replace the AccordionContent component with :
components/animate-ui/radix/accordion.tsx function AccordionContent ({ className , children , transition = { type: 'spring' , stiffness: 150 , damping: 22 }, ... props } : AccordionContentProps ) { const { isOpen } = useAccordionItem (); return ( < AccordionPrimitive.Content forceMount { ... props}> < motion.div key = "accordion-content" initial = {{ height: 0 , opacity: 0 , '--mask-stop' : '0%' }} animate = { isOpen ? { height: 'auto' , opacity: 1 , '--mask-stop' : '100%' } : { height: 0 , opacity: 0 , '--mask-stop' : '0%' } } transition = {transition} style = {{ maskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))' , WebkitMaskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))' , }} className = "overflow-hidden" ref = {ref} > < div className = { cn ( 'pb-4 pt-0 text-sm' , className)}>{children}</ div > </ motion.div > </ AccordionPrimitive.Content > ); }
We use Radix UI for the accordion component.
We take our inspiration from Shadcn UI for the accordion style.