Reply To: Add Class and ID to Tab Field

• John Huebner

• December 2, 2016 at 12:49 am

There are 2 parts to a tab field, the tab button and the tab field which is actually hidden. You can add a wrapper class and ID to the tab field using a filter.

  add_filter('acf/load_field/key=field_584024f7f7cfe', 'add_class_to_my_tab');
  function add_class_to_my_tab($field) {
    //echo '<pre>'; print_r($field); echo '</pre>';
    $field['wrapper'] = array(
      'width' => '',
      'class' => 'my-tab-class',
      'id' => 'my-tab-id'
    );
    return $field;
  }

There isn’t any way to add a class or id to the tab button.

The tab field is different from other fields because it is split into 2 parts, the tab button and the tab field.

If you want to target the tab button for something like CSS or JS then you’d need to use a selector that looks something like

.acf-tab-button[data-key-"field_584024f7f7cfe"]

You could also target the tab wrapper of the field itself with a selector like

[data-type="tab"][data-key="field_584024f7f7cfe"]