Tabs transitions

Hello All,

I was hoping someone might be able to help me with this. I am creating a tabs component and I want each choice to grow in height when selected much like the show/hide interaction tutorial. Is there any way to do that?

Thanks

1 Like

are you sayingā€¦ when ā€œtab1ā€ is selected - the container changes dimensions to say 300x300

and if ā€œtab2ā€ is selectedā€¦ the container changes dimensions to 400x200 ?

If soā€¦ I donā€™t think you can do that - currently. Perhaps with JQ ?.. but I havenā€™t tried it or needed it.

No, I mean that if you have it set to no tabs active by default. When you first click one, it will load like EXAMPLE 3 CLICK TO SHOW & HIDE CONTENT at http://interactions.webflow.com

Hi @DFink take a look at this rough test I just did. Is this what you looking for?

Tabs with interactions and all closed at start

Se how I did it

Itā€™s the second example named Default tabs =D

Awesome, well at least now I know its possible. There is one issue though, is there any way to have it not do the animation when 1 tab is already open?

You only want that animation when you open the tab for the first time and after that it should work like the default tabs?

Actually its fine the way that works. I am having an issue though. I copied your interaction exactly and it ends up not fully loading the tab. I think even though i put 100%, it is reading it as 100px. I think this is a bug. The first tab is the only one itā€™s applied to. Click more info Vendors

Strange, I really donā€™t know how to solve your problem. It should work because mine is working =)

Cool demo page @jorn (:

@DFink Can you please share your projectā€™s public link so itā€™s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

1 Like

Nice example @jorn.

@DFink - I understand what you are looking for now.

I also see the problem you are having.

@ALLā€¦ see this video

http://quick.as/zQPWfwaz

1 Like

I donā€™t know what you are trying to show in that video. There are 2 paragraphs in the tab contents.

Here is my public link. Just go to the last page, the vendors page.

https://webflow.com/design/cad?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

Aaaaah Ok I got it.

So you donā€™t achieve this with tabs normally. But with interaction. You just need link block, put your text and your arrow in it. below, a div with your text. Give it a unique class name and design it like it should be when itā€™s open. Then set the height of this div to 0px.

Select your link block, and create an interaction. Chose ā€œon Clickā€ and select ā€œaffect different elementā€. In the field, type the class name you gave to the div. Add an event for the On First Click, set the height to 100%, 400ms ease out. Add an event for On Second Click and set to height 0% 300ms ease in.

So every other click displays the div, every other other closes it.

Do you mean not using tabs at all? I donā€™t want to do that because I will have over 100 entries and having that many unique classes will be so much work. Along with having to apply a close element to the other 3 classes in each row so that when you open another one without closing the first, they donā€™t stack on each other. Tabs is the better option.

All the text divs can have the same name. You can have a unique structure an replicate it for each product, because you can limit the interaction to ā€œsiblings elementsā€.

product div
-button ā† here you apply the interaction and limit it to siblings, so it will only affect siblings
-text div

That also will not work because the 4 logos are in columns and the corresponding div is full width so when it goes to mobile, the columns will stack and their corresponding divs will be stacked below. Believe me, I tried all this.

so the problem I pointed out - is not the problem you are having ???

then you have 2 problemsā€¦ and you need look at the video again.

because I could not scroll scroll the content of the tab. Maybe you can.

The tab is not loading entirely! That is the problem. Canā€™t you tell that the bottom is cut off? The interaction is the same as yours but it will not load fully. I do not want it to scroll, I want it to fully load the height, not stop halfway.

I kinda figured thatā€¦ I did the video remember ?
The video shows that the bottom is cut off.
I made the video to show other people the problem.
And now - in looking through your project - I cannot find the manufacturer / vendor page.

Andā€¦ on a side noteā€¦ you seem to have 2 H1ā€™s on the Home page. Not sure if you intended that.

EDIT: found the vendor page

okā€¦ I found a pattern that works.
Iā€™m not sure if this answers your answer or fixes your problem.

But I think it will point you in the right direction. It has a few steps:

Basically, I open Tab 1 (Bosch)
In Row->Column 2 - I create a new DIV
then - I move the 2 paragraphs in Column 2ā€¦ into the new DIV
Give the new DIV a class of ā€œdivā€
Change min height to 300
Go up 2 levels to the ROWā€¦ change min height to 300
Go up 1 level to InfoDiv - change min height AND height to 300
Change your active tab to Tab2ā€¦ so that you can see the change in previewā€¦
otherwise Tab1 seems to stay open.

Preview the site.

Thereā€™s seems to be an issue with the tabs also
Because in order for me to open Tab1ā€¦ I have to click on Tab2 - then Tab1ā€¦ strange.

And as I mentionedā€¦ it seems you have 2 H1 on your Home Page.

The online videos seems to be hesitating a lot as wellā€¦ I think QuickCast is getting alot of hits ??

See Video
http://quick.as/0OB3FjDx

Thanks for trying to fix it but there is obviously a bug or something happening. I want this to work natively, not with a hack because then I have to do this over 100 times for each brand.

Also, what is wrong with having a subclass H1? I have them on a bunch of my pages