I’ve created a form with a tabbed layout, which gets crowded when viewed in tablet or mobile devices.
I’d like to convert the tabs to a dropdown select navigation when the viewport is below say 700px.
I can use CSS to hide the tabs, but the creation of functioning JS selects poses a bit more of a challenge. Before I re-invent the wheel, do you have any solutions for this issue?
I’ve never seen any solutions for this. I think you’d need to add some custom JavaScript that would insert your select field and also add actions to it. The easy part would be to trigger the changes of the tabs, you’d just need to trigger the click action on the tab links that you’re hiding with your custom css, I think.
I can see how the tabs toggle to active with the class “active” added to the <li>.
I also see that clicking the tabs toggle visibility on items in the tabs by adding or removing the “hidden-by-tab” class.
So far, so good. What I don’t see right away is how ACF identifies which fields are associated with a given tab. So I can create the dropdown selector which would trigger the event and I could manually add the field names (e.g. acf-field-599a68e5b5919) or the data-name attribute (e.g. address_1).
But how can I programmatically distinguish and select the divs for the different tabs?
It’s a bit of a challenge to climb through the jQuery code, could you provide a sample of how the plugin does it, so I (and others with this challenge in the future) can have a roadmap to implementing such a solution? Happy to post my code when I get a final working version.
Thanks!
I think you may have misunderstood what I was saying to do. When something is selected in the select field you insert, trigger the tab link
$('a.acf-tab-button[data-key="field_59a94850d7bea"]').trigger('click');
and let ACF do the work of showing and hiding all the right fields.
