Creating a Multi Tab accordion block on Payload

default discord avatar
roac
6 months 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

  • discord user avatar
    jesschow
    Payload Team
    6 months 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
  • default discord avatar
    roac
    6 months ago

    Thanks so much @jesschow

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.