Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Thanks for this nice module!
I have setup some content in horizontal tabs. Is there a trick how can I animate the height of the tabs when I am switching?
I am open for all solutions incl. jQuery!
thanks!
Comments
Comment #1
nils.destoop CreditAttribution: nils.destoop commentedThe only way to do this, is by taking over Drupal.horizontalTab.tabShow (overwrite it with javascript), and write custom javascript for it.
Comment #2
flocondetoileYou could easily add an animation (type fadein / fadeout) by using css3 transition. You have to add the property opacity on the class below.
.horizontal-tabs fieldset.horizontal-tabs-pane {
border: 0 none;
opacity: 1;
padding: 0 1em;
}
.horizontal-tabs .horizontal-tab-hidden {
display: block;
opacity: 0 !important;
position: absolute;
top: -100000px;
}
.horizontal-tabs-pane {
-moz-transition: all 2s ease 0s;
}
I would be interrested too in the code snippet that would overload the function mentionned. I tried to add .fadein .fadeout in the code without success, and tried to use the jquery plugin organic tabs without success too.
It was very useful if we could chose an animation between the tabs
Great Module !
Comment #3
Goekmen CreditAttribution: Goekmen commentedThanks for the tip, I will try it tomorrow :-)
Comment #4
nadavoid CreditAttribution: nadavoid commentedI'm trying some of this currently. Could someone point me to some examples of overriding a specific function, so that I can override Drupal.horizontalTab.tabShow?
Comment #5
BaiZhito CreditAttribution: BaiZhito commentedI tried to use jquery.cicle, but with minimum succesс and lots of wasted time...
For now, the css3 solution satisfies me.
In "horizontal-tabs.css" I've changed:
And here is what I get:
http://klimatik-burgas.com/klimatik-panasonic-etherea-2014
Comment #6
nicstar CreditAttribution: nicstar commentedThanks BaiZhito for your css in #5. Works perfectly for our needs.