Accordion: change the HTML tag for Trigger

[ross-peterson]

This seems simple, but not sure how to change the html tag for the accordion trigger. Currently it seems out of the box it is an h3, and I want it to be an h4. Any thoughts here? Is there a prop on <AccordionTrigger /> for this that I'm missing?

[servesh-chaturvedi]

Accordion.Trigger is a button. You probably want to change the header. One way I can think of is you can pass asChild prop to the <Accordion.Header> and wrap the children in h4 tag like:

<Accordion.Header asChild className={s.Header}>
  <h4>
    <Accordion.Trigger className={s.Trigger}>
      <span>Is accessible?</span>
      <ChevronDownIcon aria-hidden className={s.Icon} />
    </Accordion.Trigger>
  </h4>
</Accordion.Header>

[denniswanjiru]

Accordion.Trigger is a button. You probably want to change the header. One way I can think of is you can pass asChild prop to the <Accordion.Header> and wrap the children in h4 tag like:

<Accordion.Header asChild className={s.Header}>
  <h4>
    <Accordion.Trigger className={s.Trigger}>
      <span>Is accessible?</span>
      <ChevronDownIcon aria-hidden className={s.Icon} />
    </Accordion.Trigger>
  </h4>
</Accordion.Header>

This works for me. Thanks!

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.