Tabs

Hello,

I can help you, but you should show me the page with tabs.

Thanks, the one that I’m working on is https://hoffbrausteaks.com/amarillo-menu/ I want to add one in between Kids and To Go but i want it to link to another page instead.

Thanks for your assistance.

You can put link inside tab title, but you need to use single quotes for link tag.

Code:

[tabs]
   [tab title="<a href='https://example.com/'>Tab title</a>"] Content [/tab]
[/tabs]

And JS-code:

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.su-tabs-nav span').click(function() {
      if ($(this).find('a').length > 0) window.location.href = $(this).find('a').attr('href');
   });
});
</script>

You can paste js-code right inside post editor in HTML mode, but I recommend to use theme files.

I found easy way to solve your problem.

Go to Dashboard > Shortcodes Ultimate > Custom CSS (tab) and add next portion of CSS code to the editor:

.su-tabs-nav span a {
   display: block;
   margin: -5px -15px;
   padding: 5px 15px;
   font-weight: normal;
}

Use this CSS code instead of js-code I’ve provided above.
BTW you still need to use link in tab title attribute.

And there is final solution:

Shortcode

[tabs]
   [tab title="<a href='https://example.com/'>Tab title</a>"] Content [/tab]
[/tabs]

Custom CSS

.su-tabs-nav span a {
   display: block;
   margin: -5px -15px;
   padding: 5px 15px;
   font-weight: normal;
}

Thanks, I’m trying to get this to work. Right now I see the code on my sample page. I’ thinking I may have put the javascript in the wrong place.

Can you tell me exactly where I would put it? I’m trying to put it in the theme files and I’ve tried Body Tag, Body Top, Body Header None of them seem to work.

My test page is https://hoffbrausteaks.com/test-menu and I’ve used

[/tab]
[tab title=”Tab title“]
Test
[/tab]
[/tabs]

Thanks for yoyu assistance.

See my latest reply. You can do it without javascript and this way is better.

As I see, you’re using visual editor that converts your link into text.
I’ve recorded a video that will explain you how to add this link properly using visual editor.

This is code that I paste to editor in the video:
[tabs]
[tab title=”] Content [/tab]
[/tabs]

Video – https://www.screenr.com/7oRH

Ok…I’ve added rthe CSS code and used the following shortcode

[/tab]
   [tab title="<a href='https://example.com/'>Tab title</a>"] Content [/tab]
[/tabs]

all i see is code.

Does this need to be set up as another set of tabs?

Please watch the video and make sure you’re doing same things

I watched the video and that is how i was adding it. I appreciate it.

I did finally get it working though. This is what i did.

[tab title=’Bar‘][/tab]
[/tabs]

It fits now right under the rest of the tabs and I think I feel comfrtable that I can add/move it where i need it to be within the tabs.

Thank you so much for your help. I can now finish the page.

Glad to have helped you