Suggestions on implementing accordion UI in template

Kirby 3 Solved ✅
#1

Hi there! I have the current setup:

Screenshot 2023-01-23 at 19.05.43
Screenshot 2023-01-23 at 19.05.43716×452 39.7 KB

As you can see, there’s some text wrapper in an “accordion” interface element. This text is shown when the user clicks in the “+”.

Currently the full text is just a field with type: textarea, and I’m using kirbytext() to render it in the template. This works well not because I only have paragraphs, but I’m not sure how to implement this “accordion” right in the middle of the text.

Where should I be looking at or how would you suggest to resolve this? Thank you.

#2

So you want a way to continue writing your text as normal but be able to integrate an accordion whereever you need, i.e. without having the accordion in a separate field?

  1. KirbyTags
  2. Use the blocks field with a custom accordion block:
#3

Thank you! I’m trying to set a standard text block with some test content to be shown by default. However, it won’t show in the Panel. Not sure what I’m doing wrong. The blueprint:

title: 'References'

tabs:
  # title & SEO
  seo:
    label: 'SEO'
    icon: search
    fields:
      web_title:
        label: 'SEO Title'
        type:  text
        help: 'lorem'

      web_meta_description:
        label: 'SEO Meta description'
        type:  text
        help: 'lorem'

      tags:
        label: 'Tags'
        type: tags

  # content
  content:
    label: 'Content'
    icon: text
    columns:
      main:
        width: 2/3
        sections:
          fields:
            type: fields
            fields:
              cover:
                label: 'Cover Image'
                type: files
                multiple: false

              header_title:
                label: 'Header Title'
                type: text

              header_intro:
                label: 'Header Intro'
                type: textarea
                buttons:
                  - bold
                  - '|'
                  - link
                  - email

              text2:
                  type: blocks
                  default:
                    - type: text
                      content:
                        text: test content

              text:
                label: 'Text'
                type: textarea
                buttons:
                  - bold
                  - '|'
                  - link
                  - email

              text_image:
                label: 'Text Image'
                type: files
                multiple: false
      sidebar:
        width: 1/3
        sections:
          files:
            label: 'Files'
            type: files

          pages:
            label: 'Pages'
            type: pages
            template: industries-inner

What I’m doing wrong?

#4

Your blueprint should work fine, but keep in mind that default content is only ever added at page creation, not when you add the field after that.

#5

Oh, makes sense. Thank you!