Accordion field | Click to Next

[clicktonext]

Collapses the content below headlines in Panel for Kirby 3

Kirby accordion field plugin collapses the content below headlines in Panel for Kirby 3.

Accordion Field

Installation

1. Download the latest release
2. Unzip downloaded file
3. Copy/paste unzipped folder in your /site/plugins folder

Usage

fields:
  accordion:
    label: Profile
    type: accordion
    toggle: true
    reset: true
    pretty: true
    preview: "{{first_name}} {{last_name}} - {{country}}"
    default:
      first_name: John
      last_name: Doe
      phone: "671-969-4772"
      email: john@doe.com
    fieldsets:
      step01:
        label:
          tr: Adım 01
          en: Step 01
        open: true
        headline: "{{first_name}} {{last_name}}"
        fields:
          first_name:
            label: First name
            type: text
            required: true
            autofocus: true
            width: 1/2

          last_name:
            label: Last name
            type: text
            required: true
            width: 1/2

          phone:
            label: Phone
            type: text
            width: 1/2

          email:
            label: E-Mail
            type: email
            width: 1/2
            required: true

      step02:
        label: Step 02
        fields:
          address:
            label: Address
            type: textarea
          country:
            label: Country
            type: text
            width: 1/2
          zip:
            label: ZIP
            type: text
            width: 1/2

      step03:
        label: Step 03
        fields:
          available:
            label: Available for hire
            type: toggle
            width: 1/3
            text:
              - "no"
              - "yes"

          expertise:
            label: Expertise
            type: multiselect
            width: 2/3
            options:
              php: PHP
              kirby: Kirby
              sql: SQL
              vue: Vue
              html: HTML

Field methods

->toAccordion()

Assigns all fields in accordion to the object.

if ($profile = $page->accordion()->toAccordion())
{
  echo $profile->first_name();
  echo $profile->last_name();
}

Returns all fields in accordion field as array with passing true param.

$fields = $page->accordion()->toAccordion(true);

foreach ($fields as $field) {
  echo $field->value();
}