andrewhaine/statamic-accordion-group

Stash groups of fields from long fieldsets away in accordion-style toggle boxes.

Statamic Accordion Group

Stash groups of fields from long fieldsets away in accordion-style toggle boxes.

Installation

To install this fieldtype, download the addon files from the Statamic marketplace and place the AccordionGroup folder in your site/addons directory. You should then be able to add 'Accordion Group' fields to your fieldsets.

Setting up fieldsets

You will need to define fieldsets for groups of fields that you wish to place within an accordion group, once a fieldset has been built you can tell you accordion group to use that fieldset, either through the field 'extras' interface or in your yaml.

Example

In the example below we are storing fields from the 'metadata' fieldset in an accordion group:

fields:
  metadata:
    type: accordion_group
    display: Metadata
    instructions: Optimize the metadata for this page or post.
    child_fieldset: metadata

How do I use this in my templates?

In templates the fields contained within accordion groups will be prefixed with the name of the group, for example the meta_title field will become metadata.meta_title:

{{ if metadata.page_no_index }}
<meta name="robots" content="noindex,nofollow" />
{{ /if }}
<title>{{ metadata.meta_title or title }}</title>
<meta name="description" content="{{ metadata.meta_description }}" />

Nesting?

Yes, but not recommended when your child fieldset contains the parent accordion field.

statamic-accordion-group's Issues

A few improvements

Image speaks louder than words.

• Repeated title and instructions
• No padding on the fieldset fields

EDIT:
This works flawlessly when it's not in a replicator.
In the screenshot, the accordion_group is added to a replicator.

Fix for Padding

add this to line 91.

    fieldClasses(field) {
      return [
        "form-group",
        "p-2",
        field.type + "-fieldtype",
        tailwind_width_class(field.width),
        field.classes || ""
      ];
    }

Not sure how we can fix the ReplicatorSet generated headers without changing the name for instruction and title.

Conditionals not working within accordion group

Thanks for creating this addon. I have used it in a few projects and it works great to keep the editor clean. However, it seems that using conditionals on fields doesn't work within an accordion group.

For example, I have a simple show of two fields when selecting banner_type for color and image. Both fields end up showing within the accordion group when it should only be showing one field depending upon the selection made to banner_type. The same example works fine when loading it via a partial.

Here the example code:

banner_type:
  options:
    color: Color
    image: Image
  type: select
  default: image
  display: Banner Type
banner_color:
  type: colorpicker
  localizable: true
  width: 33
  display: Background Color
  show_when:
    banner_type: color
banner_image:
  container: main
  folder: /
  restrict: false
  type: assets
  localizable: true
  width: 33
  display: Background Image
  max_files: 1
  mode: grid
  show_when:
    banner_type: image

Screenshot of the accordion group: