# Accordion field | Click to Next

**URL:** <https://forum.getkirby.com/t/accordion-field-click-to-next/24764>\
**Category:** Plugins\
**Tags:** v3\
**Created:** [February 18, 2022, 11:59am UTC](https://forum.getkirby.com/t/accordion-field-click-to-next/24764 "2022-02-18T11:59:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![clicktonext](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/clicktonext/32/11326_2.png) [@clicktonext](https://forum.getkirby.com/u/clicktonext)\
**Post date:** [February 18, 2022, 11:59am UTC](https://forum.getkirby.com/t/accordion-field-click-to-next/24764/1 "2022-02-18T11:59:18Z")

</div>

# Collapses the content below headlines in Panel for Kirby 3

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

[https://clicktonext.com/plugins/accordion-field](https://clicktonext.com/plugins/accordion-field)

 ![131719194-395ec239-d88a-4866-b754-9a023dce02de](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/85bc13a1bc0b2dc6fe253bf6b1ba366cef71bdeb.png)

## Installation

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

## Usage

```auto
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.

```auto
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.

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

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

```

---

<div class="post-metadata">

**Author:** ![ahmetbora](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/ahmetbora/32/11671_2.png) [@ahmetbora](https://forum.getkirby.com/u/ahmetbora)\
**Post date:** [October 11, 2022, 2:03pm UTC](https://forum.getkirby.com/t/accordion-field-click-to-next/24764/2 "2022-10-11T14:03:41Z")

</div>



---

<div class="post-metadata">

**Author:** ![ahmetbora](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/ahmetbora/32/11671_2.png) [@ahmetbora](https://forum.getkirby.com/u/ahmetbora)\
**Post date:** [October 11, 2022, 2:03pm UTC](https://forum.getkirby.com/t/accordion-field-click-to-next/24764/3 "2022-10-11T14:03:53Z")

</div>