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
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
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