Tabbed content in the middle of a layout

Kirby 4 Solved ✔️
1

I’ve got a Blueprint where it would make sense to have a set of tabs. I’ve got the tabs working.

For the next evolution of the page, I want to have some content above the tabs, and some columns of content below the tabs.

Is this possible…?
Thanks!

series.yml

title: series

status:
  draft:
    label: Draft
    text: The series is still in draft mode. It can only be seen by editors with Panel access.
  unlisted:
    label: In Review
    text: The series is online and can be visited with the direct URL. The team must still give the final go to publish it.
  listed:
    label: Published
    text: The series (and any Collections within it) can be viewed on the live site.

columns:
  - width: 3/3
    fields:
      pageHeading:
        type: headline
        label: Inside this series



tabs:
  wipCollections:
    label: Works in progress
    icon: draft
    columns:
      - width: 3/3
        sections:
          seriesCollectionsDrafts:
            type: pages
            label: Collections
            template: collection
            query: page.index(true).filterBy('status','draft')
            status: draft
            layout: cards
            size: small
            sortBy: modified desc
            info: "{{ page.Publicationformat }}"
            image:
              cover: true
              back: "linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(240,240,240,1) 100%)"
            empty: Add a collection

  inReviewCollections:
    label: In review
    icon: status-unlisted
    columns:
      - width: 3/3
        sections:
          seriesCollectionsInReview:
            type: pages
            label: Collections
            template: collection
            query: page.index(true).filterBy('status','unlisted')
            status: review
            layout: cards
            size: small
            sortBy: modified desc
            info: "{{ page.Publicationformat }}"
            image:
              cover: true
              back: "linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(240,240,240,1) 100%)"

  publishedCollections:
    label: Published
    icon: status-listed
    columns:
      - width: 3/3
        sections:
          seriesCollectionsPublished:
            type: pages
            label: Collections
            template: collection
            query: page.index(true).filterBy('status','listed')
            status: published
            layout: cards
            size: small
            sortBy: modified desc
            info: "{{ page.Publicationformat }}"
            image:
              cover: true
              back: "linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(240,240,240,1) 100%)"

columns:
  - width: 3/3
    seriesVolumes:
      type: pages
      label: Volumes
      templates: 
        - volume
      layout: list
      size: small
      sortBy: modified desc
      limit: 5
      image:
        cover: true
        back: "linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(240,240,240,1) 100%)"
      empty: No volumes yet
2

No, that’s not possible, tabs are only possible on the top level.

3

Well, I do like a straightforward answer :laughing:

4

…what if I pair a Toggles field with the When property? :face_with_monocle:

Thinking out loud…
I want to build tab-like interaction. One view visible at a time, one view must always be active.

So, let’s say I add a Toggles field to the Blueprint.
Using a Toggles field would mean any time a Panel user switches between the three states, then Kirby will try to Save that change into the corresponding text file in the Content folder. That’s not what I want.

And if used a Select field instead of a Toggles field, then that same constraint would still apply.

Still thinking…
My intention is to the switch the display of which set of information is being displayed; not to actually change the information. Does that then mean I need to build something custom in the view-layer…?

Or do I use a selection of anchor links to put the state into the URL, and then look for a way for Kirby to parse that state…?

5

I think both would be possible, for the first option maybe custom section with the option to add tabs.

I would have suggested to look at the code of this plugin, but it is not open-source: Accordion Field | Kirby CMS Plugins