CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraptabs
Dr.Kameleon
Dr.Kameleon

Reputation: 22810

Bootstrap Tab Pane slide effect

OK, pretty self-explanatory but I cannot figure how it's done, nor can I find any resources...

I have simple list of tab-panes like :

  tab-pane fade in active

But I do not need a fade transition. But a slide one, instead, preferably from the right. Is there such a thing? How can I do it?

Upvotes: 0

Views: 20164

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

I created that little js function:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    
    var target = $(this).attr('href');

    $(target).css('left','-'+$(window).width()+'px');   
    var left = $(target).offset().left;
    $(target).css({left:left}).animate({"left":"0px"}, "10");
})

You just have to add this small CSS to the standard Bootstrap, the standard HTML markup stays the same:

.tab-content .tab-pane {    
    position: relative;
}

Take a look at this bootply to see if it is what you want.

BOOTPLY

Upvotes: 14

Related Questions