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”.
-button <-- here you apply the interaction and limit it to siblings, so it will only affect siblings
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 ??
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
If you add a div and create 3 classes… it should fix everything… without a hack.
As for the header…
I didn’t review the code in detail… it’s just something that caught my eye when I was trying to find the vendor page.
That’s a huge site… you did a nice job. Especially considering the size of the site.
Were those subclasses or H1 Headers. They looked like H1 headers.
If they are… click this link:
See what Google says about h1 tags.
Some people will says it’s ok. Some will say it’s not.
I prefer to listen to Google.
On a side note… we are also an seo / sem company… I’m google and bing certified… so just trying to help you out a little.
and again - I didn’t review your code in detail… so I might be wrong. I was more concentrated on the tab issue.
So I tried what you did and it negated the whole point of this, which was to get it to grow vertically. Now it just appears as if there was no interaction.
I agree… it does appear to be a bug.
I used the demo jorn provided and was able to create the same issue.
You can (somewhat) fix it the issue - by making the container scrollable
- which I don’t think you want.
See video 1:
Also, you could expand the container to greater than 100%
- which I don’t think you want either.
See video 2:
I give up… 3 hours to get to this point… and I couldn’t find an acceptable fix
Fixed it!! Look at my links again. I noticed in the published code, that even though I set the height to 100%, the generated code was 100px. In interactions I set the height to auto instead and now the full content i shown.
WOHOO!! Thank you so much! It works, why didn’t I think of that? I have a support email going with them to fix the px issue but I’m glad this works. Thanks Revolution for your hours of work, I’m glad we found a solution eventually.
Okay, more of a new issue now. Is there anyway to have a second click on a tab close that tab? Also anyway to trigger the closing of any other open tabs in other tab elements when one opens. Like if i have rows of tabs and a tab is open in row one, opening one on row 3 will close the one on row 1.
Vincent, can you explain more about the sibling workflow? Turns out I need to use interactions instead due to the tabs component not loading in order on mobile. I want to know of an easy way to close any open elements easily when a new element is triggered to open.
Is this accordian functionality your asking for? It’s been asked before and there’s no easy solution for that I’m afraid. I was trying to that with navbar and drop downs in my example site I posted here.
Well the tabs worked great until I realized that on mobile, the tab headers load in a row, with the content below all of them. I need each tab to trigger the content direclty below it. I can do this with interactions and simply copy the entire implementation and reorder on mobile and hide on the other media queries. The only thing I’m hoping to find is a simple way to have the interactions close all other open tabs when opened.
Accordion: Is this what you are looking at? : http://goo.gl/Neydy4
I created it using dropdown widget. Adjust the dropdown list postioning to relative. Thats all. It will shift the dropdown list below downwards.
Yeah using dropdowns seriously limits customizability and definitely will not work for my needs. Thanks though!