Home › Forums › Front-end Issues › Add Class and ID to Tab Field › Reply To: Add Class and ID to Tab Field
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"]
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We’re reaching out to our multilingual users to ask for help in translating ACF 6.1. Help make sure the latest features are available in your language here: https://t.co/TkEc2Exd6U
— Advanced Custom Fields (@wp_acf) May 22, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.