Accordion not opening smoothly

Answered

Broad-snouted Caiman posted this in #help-forum

Broad-snouted CaimanOP

2024-02-18T02:19:30.000Z

I'm using the shadcn accordion: https://ui.shadcn.com/docs/components/accordion
The one at the website opens smoothly. If I use the same code, it will open instantly (not animated). It closes smoothly, like the example on the website.
What could be causing this?

Answered by Broad-snouted Caiman

Found out what the problem was, although I can't explain why this is actually a problem: important: true. If I remove this from tailwind.config.ts, then it works.

View full answer

36 Replies

josh

2024-02-18T02:27:34.000Z

Did you follow step 2, where you need to add the animations to the tailwind config?

@josh Click to see attachment

Broad-snouted CaimanOP

2024-02-18T02:40:59.000Z

Yeah, it does that automatically. That's why the close part works. My guess is that --radix-accordion-content-height is only computed correctly when it's opened. That's why closing works smoothly, but opening doesn't.

josh

2024-02-18T02:42:02.000Z

I'm not sure then. Could you share the code that uses the accordion?

This is how I use it for a FAQ section

<div className="w-full md:w-2/3">
  <Accordion type="single" collapsible className="w-full">
    {
        faqs.map((faq, index) => (
            <AccordionItem key={index} value={`item-${index}`} className="border-theme-100">
                <AccordionTrigger className="text-left text-theme-900">{faq.question}</AccordionTrigger>
                <AccordionContent className="whitespace-pre-wrap text-theme-700">{faq.answer}</AccordionContent>
            </AccordionItem>
        ))
    }
  </Accordion>
</div>

@josh This is how I use it for a FAQ section tsx <div className="w-full md:w-2/3"> <Accordion type="single" collapsible className="w-full"> { faqs.map((faq, index) => ( <AccordionItem key={index} value={`item-${index}`} className="border-theme-100"> <AccordionTrigger className="text-left text-theme-900">{faq.question}</AccordionTrigger> <AccordionContent className="whitespace-pre-wrap text-theme-700">{faq.answer}</AccordionContent> </AccordionItem> )) } </Accordion> </div>

Broad-snouted CaimanOP

2024-02-18T03:15:20.000Z

export default function GlossaryTerms({
  terms,
}: {
  terms: Readonly<GlossaryTerm>[]
}) {
  return (
    <Accordion type="single" collapsible className="w-full">
      {terms.map((term) => {
        return (
          <AccordionItem key={term.name} value={term.name}>
            <AccordionTrigger>{term.name}</AccordionTrigger>
            <AccordionContent>{term.meaning}</AccordionContent>
          </AccordionItem>
        )
      })}
    </Accordion>
  )
}

Broad-snouted CaimanOP

2024-02-18T03:17:15.000Z

Actually, it's not advised to use index as key. Read this: https://react.dev/learn/rendering-lists

@Broad-snouted Caiman Actually, it's not advised to use index as key. Read this: https://react.dev/learn/rendering-lists

josh

2024-02-18T03:25:35.000Z

Thanks, but it's not a problem when the items don't change.

@josh Thanks, but it's not a problem when the items don't change.

Broad-snouted CaimanOP

2024-02-18T03:26:02.000Z

True ðŸ‘

josh

2024-02-18T03:27:15.000Z

I'm not sure then. Your code looks the same as mine. Have you confirmed your theory of the content height variable not being set?

@josh I'm not sure then. Your code looks the same as mine. Have you confirmed your theory of the content height variable not being set?

Broad-snouted CaimanOP

2024-02-18T03:30:27.000Z

Hm, I think so. What I did was replace to: { height: 'var(--radix-accordion-content-height)' } by to: { height: 50 }. With that, the animation works, although each element has its own height, so it isn't a solution.

@josh I'm not sure then. Your code looks the same as mine. Have you confirmed your theory of the content height variable not being set?

Broad-snouted CaimanOP

2024-02-18T12:23:23.000Z

I've inspected my element:

<div data-state="open" id="radix-:R43auuekq:" role="region" aria-labelledby="radix-:R3auuekq:" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-collapsible-content-width: 783.71875px;"><div class="pb-4 pt-0">Some content</div></div>

Then, I've inspected ShadCN website:

<div data-state="open" id="radix-:r6t:" role="region" aria-labelledby="radix-:r6s:" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-collapsible-content-height: 36px; --radix-collapsible-content-width: 443.796875px;"><div class="pb-4 pt-0"></div></div>

Mine doesn't have --radix-collapsible-content-height: 36px;

josh

2024-02-18T12:37:47.000Z

Have you checked the console for any hydration errors?

@josh Have you checked the console for any hydration errors?

Broad-snouted CaimanOP

2024-02-18T15:05:56.000Z

No hydration errors.

josh

2024-02-18T19:28:58.000Z

Reckon you could share the live site?

@josh Reckon you could share the live site?

Broad-snouted CaimanOP

2024-02-19T12:01:41.000Z

It's still in development, but I've pushed it so you could see it: https://atlasdoconhecimento.vercel.app/glossario

josh

2024-02-19T12:08:59.000Z

thanks. I notice that --radix-collapsible-content-height gets set for a moment while it's closing, then gets deleted

josh

2024-02-19T12:16:32.000Z

Really odd, I'm not sure why. My next step would be to put the accordion on an empty page with nothing else in it, to rule out something else on the page influencing it

josh

2024-02-19T12:27:59.000Z

Probably a red herring, but I'm looking for differences between your code and mine.

Worth changing

<AccordionItem key={term.name} value={term.name}>

<AccordionItem key={term.name} value={`item-${term.name}`}>

@josh thanks. I notice that `--radix-collapsible-content-height` gets set for a moment while it's closing, then gets deleted

Broad-snouted CaimanOP

2024-02-19T12:29:09.000Z

Wow, I didn't notice that, good sight, you have!

@josh Really odd, I'm not sure why. My next step would be to put the accordion on an empty page with nothing else in it, to rule out something else on the page influencing it

Broad-snouted CaimanOP

2024-02-19T12:29:25.000Z

Ok, I'll create a blank project to test this out.

@josh Probably a red herring, but I'm looking for differences between your code and mine. Worth changing ts <AccordionItem key={term.name} value={term.name}> to ts <AccordionItem key={term.name} value={`item-${term.name}`}>

Broad-snouted CaimanOP

2024-02-19T12:29:35.000Z

Ok, I'll try that, thanks a lot!

@Broad-snouted Caiman Ok, I'll create a blank project to test this out.

josh

2024-02-19T12:30:23.000Z

You could do this in your existing project but temporarily delete everything else from the layout

@josh You could do this in your existing project but temporarily delete everything else from the layout

Broad-snouted CaimanOP

2024-02-20T18:14:42.000Z

Sorry for being late to answer you. I got really sick. So, actually I've tested from a blank project the exact same code from the ShadCN website. It works. Now I need to understand what in my project is affecting this component (I have no clue).

@josh You could do this in your existing project but temporarily delete everything else from the layout

Broad-snouted CaimanOP

2024-02-20T19:09:08.000Z

Found out what the problem was, although I can't explain why this is actually a problem: important: true. If I remove this from tailwind.config.ts, then it works.

Answer

@Broad-snouted Caiman Found out what the problem was, although I can't explain why this is actually a problem: `important: true`. If I remove this from tailwind.config.ts, then it works.

!=tgt

2024-02-20T20:07:48.000Z

this is likely since this might be overriding other styles

@Broad-snouted Caiman Found out what the problem was, although I can't explain why this is actually a problem: `important: true`. If I remove this from tailwind.config.ts, then it works.

josh

2024-02-20T21:42:41.000Z

so glad to hear, I never thought of checking the tailwind config

and hope you're feeling better now buddy

josh

2024-02-20T21:59:04.000Z