Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Creating a Multi Tab accordion block on Payload

default discord avatar
techinverted2 years 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

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @149873958760480769

    , 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
    techinverted2 years ago

    Thanks so much

    @854377910689202256
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.