"Tabbed Form"
Bootstrap 3.2.0 Snippet by vish448

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container subscription-form">
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Billing Information </a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Payment Information </a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Shipping Information </a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_default_1">
<p>
<a class="btn btn-default active existing-customer-email-btn">
Existing Customer
</a>
<a class="btn btn-default new-customer-email-btn">
New Customer
</a>
</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.subscription-form{
border: 1px solid #ccc;
padding: 10px;
}
.container{
margin-top: 20px;
}
.existing-customer-email{
display: none;
}
.small-10{
width:16.6% !important;
}
.small-span{
width: 25% !important;
}
.input-control{
float:left;
width: 100%;
position: relative;
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*$('.existing-customer-email-btn').click(function(){
$('.existing-customer-email').addClass("show");
$('.existing-customer-email-btn').click(function(){
$('.existing-customer-email').removeClass("show");
})
});*/
$('.existing-customer-email-btn').on('click',function(){
$('.existing-customer-email').show();
$('.new-customer-form').hide();
});
$('.new-customer-email-btn').on('click',function(){
$('.new-customer-form').show();
$('.existing-customer-email').hide();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3
login-form
Login Form
Contact Form

Questions / Comments: