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!



zuuperman’s picture

Status:Active» Closed (works as designed)

The only way to do this, is by taking over Drupal.horizontalTab.tabShow (overwrite it with javascript), and write custom javascript for it.

flocondetoile’s picture

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

Goekmen’s picture

Thanks for the tip, I will try it tomorrow :-)

nadavoid’s picture

I'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?

BaiZhito’s picture

Issue summary:View changes

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

.horizontal-tabs fieldset.horizontal-tabs-pane {
padding: 0 1em;
border: 0;
opacity: 1; /* add opacity */
transition: all 0.6s linear 0.1s; /* add transition efect */
-webkit-transition: all 0.6s linear 0.1s; /* old browsers */
-moz-transition: all 0.6s linear 0.1s;
-o-transition: all 0.6s linear 0.1s;
/* I want the active tab not to change at hover event */
.horizontal-tabs ul.horizontal-tabs-list li.selected:hover,
ul.horizontal-tabs-list li.selected a:hover,
.horizontal-tabs ul.horizontal-tabs-list li.selected:focus {
  background-color: #fff;

.horizontal-tabs .horizontal-tab-hidden {
  display: block;
  position: absolute;
  top: -100000px;
  width: 100%;
  opacity: 0 !important; /* added row */

And here is what I get:
nicstar’s picture

Thanks BaiZhito for your css in #5. Works perfectly for our needs.