Anchor-link to a Specific Item in a Tab or Accordion Module
June 5, 2019 | Beaver Builder, Tips & Tricks, WordPress
You can link to a specific item in the Tabs or Accordion module by setting a custom CSS ID for the module, then using that item’s index in the anchor link.
Note: Indexes start at 0 for the first item in the list, so the first item is 0, the second item is 1, and so on.
To link to a specific item in a Tabs or Accordion module…
Using the Beaver Builder Standard Modules:
- Open the module for editing and click the Advanced tab.
- In the ID field, set a unique ID name for the module. See the related links for more information about ID selectors.
- Link to any item in that module by specifying the module’s ID with the item’s index, separated by a hyphen.
For example, you want to create a link that will open the second tab in a tabs module, and you have added an ID name of my-tabs
 in the Tabs Advanced section.
The anchor to add to the end of the URL when linking to open the second tab is #my-tabs-1
.
Using UABB’s Advanced Accordion Module:
- Step 1:Â Open the Advanced accordions module settings and go to the settings tab.
- Step 2:Â Change “expand first item” to “no“. Once this is done, the module will automatically apply IDs to the accordion items starting with “tab-0“
- Step 3:Â Click on the save button to save the changes.
- Step 4:Â Go to the anchor button and enter the link as : /[ page name ]/#[ tab-0,1,2,3,4,etc. ]
Important Tip:
This technique may not be the best option if the site has a sticky nav enabled or an overlaying header, especially if the entire header is sticky and taller than it should be. In the case of sticky headers, the accordion or tab anchor will open touching the very top of the screen, and a sticky or overlaying header will cover it. Use this technique as a possible solution to this issue.
Sources: https://kb.wpbeaverbuilder.com/article/52-link-to-specific-item-in-tabs-or-accordion-module