Bootstrap Tab Pane to Slide Left? - css

Question

I've implemented a Photoshop design into HTML using Bootstrap (my first time with bootstrap). That is a single page website and have 4 sections (actually pages). Every section have multiple pages which I've have showed in Tab Panel using Bootstrap's tabbable class. It's working fine, I want a sliding effect for every tab to display it's content. Means, if a section contains 3 tabs and I click on the 2nd tab, the next tab's content appear as sliding effect. Is there only class name to add?
Thanks.

Answer 1

I think this is about it
<div class="container">
<div class="row">
<div id="tab-container" class="span6 offset1">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Options</li>
<li class="disabled">Information</li>
<li class="disabled">Payment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="options">
<div class="well">
<form id="frmtype1" action="" name="frmtype1" method="post">
<fieldset>
<legend>Registration Options</legend>
<label for="Reg_type1" class="radio">
<input type="radio" name="Reg_type" id="Reg_type1" value="1"/>
Registering myself with credit card or bank account
</label>
<br>
<label for="Reg_type2" class="radio">
<input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
Registering multiple people using credit card or bank account
</label>
<br>
<label for="Reg_type3" class="radio">
<input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
Registering using a purchase order
</label>
</fieldset>
<button class="btn-demo btn" data-activate="#information">Continue</button>
<span class="help-inline" style="display:none;">Please choose an option</span>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="information">
<div class="well">
<form name="everything" id="frmtype2" action="" method="post"><p>Some content to give this pane a little bit of bulk</p>
<button class="btn-demo btn" data-activate="#payment" type="submit">Continue</button>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="payment">
<div class="well">
<p>Some content for the 3rd pane.</p>
</div><!-- .well -->
</div>
</div>
</div><!-- /.row -->
</div><!-- /#tab-container --> </div><!-- /.container -->
JAVASCRIPT
var selector;
var selectorID;
activateTab('#myTab a:first');
function activateTab(selectorID)
{
$(selectorID).tab('show')
.closest('.disabled').removeClass('disabled');
}
function deactivateTab(selector)
{
$(selector).off('click.twbstab')
.closest('li').addClass('disabled');
}
$('.btn-demo').on('click',function() {
selector = '#myTab a[href="'+$(this).data('activate')+'"]';
selectorID = $(selector).attr('href');
});
var val1 = $('#frmtype1').validate(
{
errorPlacement: function(error, element) {},
// prevent the standard error message from showing, rather you use the inline-text
rules: {
'Reg_type': {
required: true
}
}
});
// validate 1st form
$('#frmtype1').submit(function(e)
{
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(selector);
} else {
$('.help-inline').show();
}
return false;
});
// validate 2nd form
$('#frmtype2').submit(function(e)
{
// validate the second page
activateTab(selector);
return false;
});
// if 2nd or 3rd tab is clicked, validate as if the form was submitted
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e)
{
selectorID = $(this).attr('href');
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(this);
$(selectorID).tab('show');
} else {
$('.help-inline').show();
}
return false;
});
// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect
$(".tab-pane").css("position", "relative");
$(".tab-pane").not(".active").animate({
left: "1000px"
});
// perform slide effect
$('a[data-toggle="tab"]').on('show', function (e) {
lastPane = $(e.relatedTarget).attr('href');
$(lastPane).animate({left: "1000px"}, 300)
currPane = $(e.target).attr('href');
$(currPane).animate({left: "0px"}, 300);
});
JSFidle DEMO