Streaming live at 10am (PST)

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?


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

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

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:

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.

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

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