Linking a button to a tab

Design help General
1

Hi, If you follow my share link you can see that the third section (What we Stand For) you can see I have a standard tab element. At the bottom of each tab there is a button on ‘Problem’ that I want to link to the ‘Solution’ tab and on the ‘Opportunity’ Tab I have a button that I want to link to the ‘Solution’ Tab) makes sense when you see it! I have named each tab in the link settings; however, the button just takes you to the top of the page. Anyone know how to fix this please? Many thanks.

Here is my site Read-Only: https://preview.webflow.com/preview/betterhomes4all?preview=ce7b0ed60c7a026c8c12e928f79cd2a8
(how to share your site Read-Only link)

2

Hey @Roxzfr,

Looks like it’s working as it should. Can you confirm so I can tick this forum post as resolved?

Best,
Naweed

3

Hi @nwdsha, it’s not working for me. Its the buttons at the bottom of the tab not the top http://betterhomes4all.webflow.io this is the build. The buttons are in the tabs above ‘Other Ways You Can Help’ - kind regards Roxzanne

4

Try this trick.

Happy designing!

1 Like
5

Thanks @matthewpmunger - I’ll do that straight away!

1 Like
6

Darn it @matthewpmunger, you beat me to it :rofl:

Also try this solution by @AlexManyeki - Linking to a specific tab from a button link

All the best!

1 Like
7

Haha! I’ve got that tutorial on speed dial. :phone:

9

@matthewpmunger Smarty pants :sweat_smile: I have to manually search the forum!

10

It’s a constant struggle to work smarter not harder!

I utilize the 59 button for useful code or tricks, but also have started using Bear to extract and save useful sites and info using the browser extensions. It natively supports syntax for lots of useful code languages.

11

Good point. I use the bookmark too but when the list is longer than your phone book list, there’s no search bar to find the right post :rofl:

12

Thanks guys - this definitely works, I’d rather hoped it would be simpler - hey hell - here we go!!

13

:+1:

Tip: Add a transparent border to the default state of the tab buttons. Match it to the width of the hover state border. This will keep the buttons from moving when one of them is hovered. Or just have the border there always as the same color as its button. Then on hover only change the background color and font color.

1 Like
14

Hi Guys - it’s been a while I know, the clients been away! I looked at the video, does it basically mean I need to duplicate my page in order to create the link? So rather than the button linking to a tan it actually links to another page where the required tab is the default? Many thanks.

15

@Roxzfrv That shouldn’t be necessary, but “faking” tabs can done if say it would help with SEO or ease of design which I have done in the past for an ecommerce site. The downside is the visitor will see the page reload.

Follow the tutorial by @mistercreate but do it for the tabs on the same page instead of different pages. On the button link, instead of putting /share?tab=shared#shared-tab-section remove the page part of the link so you would just be left with ?tab=shared#shared-tab-section. That should change tabs and scroll the visitor to the top of the tab panel. Remember to change tab and shared to the class names you used in your project, and change shared-tab-section to the id you used as well.

I haven’t tested this, but in theory it should work. Hope that helps.

1 Like
16

Thank you so much @matthewpmunger. I have been playing all day and created copy pages, but I will try this tomorrow - when my head clears! I’ll let you know how I get on :slight_smile: many thanks once more.

17

Hey guys, I’ve tried to implement this solution but it didn’t work for me. Then, I’ve found a solution to this issue.

  1. Create a button that sends to a specific section on the page. (Tabs container)
  2. Use this code to open a specific tab you want.
<!-- OPEN SPECIFIC TAB -->       
 <script type="text/javascript">
    $(".classNameofTriggerBtn").click(function(e) { 
      e.preventDefault();
      $("#idofTab").click();
    })
    </script>

All the best,
Batuhan

1 Like
18

Hey guys! I’ve tried this tutorial but it’s not working for me. :frowning:

I made a video so you can see what I’ve done and I’m trying to achieve. Can somebody shed some light on how can I achieve that? Thank you sooo much

Here is my webflow read only

19

Hey @Batuhan_Bilgin!

I’ve tried your solution and it doesn’t work. Maybe some changes happened on Webflow side of things, I dunno, but it doesn’t work.