When navigating to the site which contains your tabs-element you may want to show different tabs depending on the site/content you’re coming from. You can easily do that by just changing Step 4 in the tutorial (link above) to the following code:
<?php
wp_enqueue_script('wcd_tabs');
add_action('wp_footer', function() {
isset($_GET['tab']) ? $index = $_GET['tab'] : $index = 0;
?>
<script>
const myTabs = new WCD_tabs({
target: '#myTabsElement',
defaultOpen : <?php echo $index; ?>,
});
</script>
<?php
}, 99);
?> I’ve added the following lines:
isset($_GET['tab']) ? $index = $_GET['tab'] : $index = 0;What this line does is that it looks for an addition in the URL , if it is set then the defaultOpen variable below gets that value, if not it’s still 0. If you want to have a different defaultValue make sure to change $index = 0 to whatever you would like to have!
defaultOpen:<?php echo $index;?>,Here we are taking the variable defined above and pass it to the Tabs-Element!
Link-Structure
So how does it work now? Assuming that you have changed your code, you can now set up your links.
Let’s assume that your homepage is https://example.com and your tabs-element is placed on https://example.com/landing-page.
You have several pages and you want to dynamically target the tabs from there. All you need to do is placing a link on those pages like so:
https://example.com/landing-page?tab=3
That would navigate to your landing-page with the 4th tab opened by default (remember that you have to count from 0 upwards).
Anchor-Links
If you want to combine that with an anchor-Link it would look this way:
https://example.com/landing-page?tab=3#yourAnchorID
So the $_GET Parameter has to be placed before your Anchor!