Link tabs from menu

Resolved olie93
(@olie93)

8 years, 11 months ago

Hello,

I have seen the other posts regarding linking tabs from other pages, but i can’t seem to get it to work. I tried installing WP-Tab-Anchors as that was recommend in another post but it didn’t seem to work.

Is there any other way to link to the tabs from the menu?

Regards
Oliver

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Contributor Gregor Capuder
(@capuderg)

8 years, 11 months ago
Hi,

I wrote a quick post on how to link to a specific tab, you can find the post here: Tabs widget – how to link to a specific tab

To link from a menu, you should create a new custom menu item with the URL set to the ID of the tab you want to open and add the class to the menu item as well.

Then you have to use a slightly modified JS code for it to function properly:
```
<script>
(function($) {
  $(document).on( 'click', 'li.js-trigger-tab > a', function( event ) {
    event.preventDefault();

    $( 'a.nav-link[href="' + event.currentTarget.hash + '"]' ).click();
  });
})(jQuery);
</script>
```
Take care!
- This reply was modified 8 years, 11 months ago by Gregor Capuder.
Thread Starter olie93
(@olie93)

8 years, 11 months ago

Thanks for that.

Where would the script have to be placed?

Regards
Oliver

Plugin Contributor Gregor Capuder
(@capuderg)

8 years, 11 months ago

Hi Oliver,

you should add the JS code “globally”. Maybe your theme has a JS code input box, which will include this JS code in the head of each page…

If the theme does not have such option, then I would suggest using a plugin to add custom JS code. For example I found this one with a quick google search: https://ww.wp.xz.cn/plugins/custom-css-js/ (note: I did not test it and I can’t guarantee it works ok, but it has good ratings…).

Take care!
Thread Starter olie93
(@olie93)

8 years, 11 months ago
I have added the JS code and it seems to be applying to the pages.

I have created a custom menu like below
```
add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items.'<a class="js-trigger-tab" href="#tab-newsletter">open test tab</a>';

    return $items;
}
```
Unfortunately, when i click on the link it doesn’t seem to change to the newsletter tab.
- This reply was modified 8 years, 11 months ago by olie93.
Plugin Contributor Gregor Capuder
(@capuderg)

8 years, 11 months ago

Hi,

you can add a class to the menu item through the WP menu interface. More info here: https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/

Create a custom menu item with the URL/link value equal to the tab content id (example: #tab-test) and then add the js-trigger-tab class to it with the instructions above.

No extra code needed for that.

Take care!

matrixshopping
(@matrixshopping)

8 years, 11 months ago

not working for me. can you please help
Thread Starter olie93
(@olie93)

8 years, 11 months ago
I managed to get it working but it only seems to work when the tab is selected.

If another tab is selected then it won’t goto it.

My website is https://infosec-legislation.co.uk
- This reply was modified 8 years, 11 months ago by olie93.
- This reply was modified 8 years, 11 months ago by olie93.
Plugin Contributor Gregor Capuder
(@capuderg)

8 years, 11 months ago

Hi,

I don’t know why, but your tabs have HTML h2 tags instead of a, that’s why the JS code is not working…

change this line:

$( 'a.nav-link[href="' + event.currentTarget.hash + '"]' ).click();

to:

$( 'h2.nav-link[href="' + event.currentTarget.hash + '"]' ).click();

Take care!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Link tabs from menu’ is closed to new replies.

Tags