<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>
<p class="existing-customer-email">
Existing Customer Please enter your email.
<input type="email" placeholder="Enter your email" class="form-control"/>
<button id="nextbtn" name="nextbtn" class="btn btn-primary">Next</button>
</p>
<div class="new-customer-form">
<div class="radio">Gender
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
<div class="control-group">
<span class="required-lbl">* </span><label class="control-label" for="billing_firstname">First Name</label>
<div class="controls">
<input id="billing_firstname" name="billing_firstname" type="text" placeholder="" class="input-control" required="">
</div>
</div>
<div class="control-group">
<span class="required-lbl">* </span><label class="control-label" for="billing_lastnameonaccount">Last Name</label>
<div class="controls">
<input id="billing_lastname" class="input-control" name="billing_lastname" type="text" placeholder="" class="form-control" required="">
</div>
</div>
<div class="control-group">
<span class="required-lbl">* </span><label class="control-label" for="billing_street">Street</label>
<div class="controls">
<input id="billing_street" class="input-control" name="billing_street" type="text" placeholder="" class="form-control" required="">
</div>
</div>
<div class="control-group small-span">
<span class="required-lbl">* </span><label class="control-label" for="billing_city">City</label>
<div class="controls">
<input id="billing_city" class="input-control" name="billing_city" type="text" placeholder="" required="">
</div>
</div>
<div class="control-group small-span">
<span class="required-lbl">* </span><label class="control-label" for="billing_postcode">Post Code</label>
<div class="controls">
<input id="billing_postcode" class="input-control" name="billing_postcode" type="text" placeholder="" required="">
</div>
</div>
<div class="control-group small-span">
<span class="required-lbl">* </span><label class="control-label" for="billing_country">Billing Country</label>
<div class="controls">
<select id="billing_country" class="input-control" name="billing_country" >
<option>Please Select</option>
<option>Australia</option>
</select>
</div>
</div>
<div class="control-group small-span">
<span class="required-lbl">* </span><label class="control-label" for="billing_state">Billing State</label>
<div class="controls">
<select id="billing_state" class="input-control" name="billing_state" >
<option>Please Select</option>
<option>Australian Capital Territory</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
<option>Other</option>
</select>
</div>
</div><!-- End Tab_default-1 -->
<div class="control-group">
<label class="control-label" for="billing_organization">Organization</label>
<div class="controls">
<input id="billing_organization" class="input-control" name="billing_organization" type="text" placeholder="" required="">
</div>
</div>
<div class="control-group">
<span class="required-lbl">* </span><label class="control-label" for="billing_emailaddress">Email Address</label>
<div class="controls">
<input id="billing_email" class="input-control" name="billing_email" type="email" placeholder="" required="">
</div>
</div>
<div class="control-group small-10">
<label class="control-label" for="billing_phone">Phone</label>
<div class="controls">
<input id="billing_phone" class="input-control" name="billing_phone" type="text" placeholder="" required="">
</div>
</div>
<div class="control-group small-10">
<label class="control-label" for="billing_mobile">Mobile</label>
<div class="controls">
<input id="billing_mobile" class="input-control" name="billing_mobile" type="text" placeholder="" required="">
</div>
</div>
<div class="control-group small-10">
<label class="control-label" for="billing_fax">Fax</label>
<div class="controls">
<input id="billing_fax" class="input-control" name="billing_fax" type="text" placeholder="" required="">
</div>
</div>
<button id="nextbtn" name="nextbtn" class="btn btn-primary">Next</button>
</div>
</div>
<div class="tab-pane" id="tab_default_2">
<p>
You're in 'Payments Information'
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
</p>
</div>
<div class="tab-pane" id="tab_default_3">
<p>
you're in Shipping Information
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
</div>
</div><!-- End Tab-content -->
</div><!-- End Tabbed-Line -->
</div><!-- Tabbed Panel -->
</div><!-- End col-md-12 -->
</div><!--end Row -->
</div><!-- end Container -->
.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;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.control-group{
float: left;
padding: 5px 14px;
width: 50%;
}
#nextbtn{
float:right;
margin:10px 0px;
}
/* Tabs panel
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
}*/
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below > .nav-tabs > li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
/*$('.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();
});
