Like what we’re doing? Star us on GitHub!

Creating a Multi Tab accordion block on Payload

roac
3 weeks ago
2

I want to create a FAQ accordion with multiple tabs:


Tab 1 : Products


- label


-answer


Tab 2 : Services


- label


-answer



Has anyone made this? Any help would be much appreciated. I'm more interested on how to implement this on a NextJS frontend

  • jesschow
    Payload Team
    2 weeks ago

    Hi @roac, you could setup your fields like this:



    {
      name: 'tabs',
      type: 'array',
      fields: [
        {
          name: 'tabTitle',
          type: 'text',
        },
        {
          name: 'accordion',
          type: 'array',
          fields: [
            {
              name: 'label',
              type: 'text',
            },
            {
              name: 'answer',
              type: 'richText',
            },
          ],
        },
      ],
    }


    As for the frontend, I would recommend checking out the faceless UI collapsibles:

    https://facelessui.com/docs/collapsibles
  • roac
    last week

    Thanks so much @jesschow

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More