1. Home
  2. Docs
  3. WordPress Studio Framework
  4. Framework Fields
  5. Accordion Field

Accordion Field

The arguments that are utilized in the Accordion field:

NameTypeDefaultDescription of argument
idstring A unique ID. This ID is used to get the value
typestringaccordionType of the field
titlestring Title of the field
defaultarray Default value from the database, if the option doesn’t exist.
subtitlestring Subtitle to display below the title.
descstring Description to display after the field.
helpstring Text to display on the right-corner (as a hover/popup) of the field.
classstring Extra CSS classes (space separated) to append to the field
beforestring Content to display before the field.
afterstring Content to display after the field.
dependencyarray Define field visibility depending on other field value.
attributesarray Extra HTML attributes to append to the field.
sanitizestring Callback function for sanitizing value.
validatestring Callback function for validating value.
accordionsarray An associative array containing fields for the fieldsets.

There are two configuration examples in this documentation. The first is a simple accordion configuration and the second is an accordion example with associated default values.

Simple Accordion Field Example

array(
  'id' => 'example-accordion-1',
  'type' => 'accordion',
  'title' => 'Accordion Example',
  'accordions' => array(
    array(
      'title' => 'Accordion Tab One',
      'icon' => 'fa fa-heart',
      'fields' => array(
        array(
          'id' => 'example-text-1',
          'type' => 'text',
          'title' => 'Text',
        ),
      )
    ),
    array(
      'title' => 'Accordion Tab Two',
      'icon' => 'fa fa-gear',
      'fields' => array(
        array(
          'id' => 'example-color-1',
          'type' => 'color',
          'title' => 'Color',
        ),
      )
    ),
  )
),

Accordion Field Example with Default Values

array(
  'id' => 'example-accordion-2',
  'type' => 'accordion',
  'title' => 'Accordion Default Example',
  'accordions' => array(
    array(
      'title' => 'Accordion Tab One',
      'icon' => 'fa fa-heart',
      'fields' => array(
        array(
          'id' => 'example-text-1',
          'type' => 'text',
          'title' => 'Text',
        ),
        array(
          'id' => 'example-text-2',
          'type' => 'text',
          'title' => 'Text Two',
        ),
      )
    ),
    array(
      'title' => 'Accordion Tab Two',
      'icon' => 'fa fa-gear',
      'fields' => array(
        array(
          'id' => 'example-color-1',
          'type' => 'color',
          'title' => 'Color',
        ),
      )
    ),
  ),
  'default' => array(
    'example-text-1' => 'This is sample default data',
    'example-text-2' => 'Some additional default values',
    'example-color-1' => '#33ccdd',
  ),
),

 

Was this article helpful to you? Yes No

How can we help?