<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Step 1</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Step 2</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Section 1: Cloud Services</h3>
<div class="form-group">
<div class="col-lg-6" style="margin-top:1%;">
<p>How many sales invoices do you raise on a monthly basis?</p>
<div class="input-group">
<span class="input-group-addon beautiful">
<input id="showINVOICE" class="Hideonclick" type="checkbox" name="showINVOICE" />
<input id="hideINVOICE" class="Displayonclick" hidden type="checkbox" name="hideINVOICE" />
</span>
[type=select|class=form-control|name=Contact_Sales_Invoices|id=button1|id=button1|items=auto]
</div>
</div>
<div class="col-lg-6" style="margin-top:1%;">
<p>Will you require a sales invoice template?</p>
<div class="input-group">
<span class="input-group-addon beautiful">
[type=checkbox|name=checkbox2|id=checkbox2]
</span>
[type=select|class=form-control|name=Contact_Sales_Template|id=button2|id=button1|disabled|items=auto]
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-6" style="margin-top:1%;">
<p>Would you us to import the company logo?</p>
<div class="input-group">
<span class="input-group-addon beautiful">
[type=checkbox|name=checkbox3|id=checkbox3]
</span>
[type=select|class=form-control|name=Contact_Sales_Logo|id=button1|id=button1|disabled|items=auto]
</div>
</div>
<div class="col-lg-6" style="margin-top:1%;">
<p>Will you require tracking/departments set up?</p>
<div class="input-group">
<span class="input-group-addon beautiful">
[type=checkbox|name=checkbox4|id=checkbox4]
</span>
[type=select|class=form-control|name=Contact_Sales_Tracking|id=button2|id=button1|disabled|items=auto]
</div>
</div></div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" id="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Pricing table - Choose and edit your package</h3>
<!-- price & service -->
<div class="container">
<div class="row">
</div><br>
<!-- Pack 1-->
<div class="col-md-3" id="home-box">
<div class="pricing_header">
<h2>Service</h2>
<div class="space"></div>
</div>
<ul class="list-group">
<li class="list-group-item Displayonclick" id="Invoice" hidden style="padding: 19px;"><span class="glyphicon glyphicon-ok" ></span> Sales invoice per month</li>
<li class="list-group-item" style="padding: 19px;"><span class="glyphicon glyphicon-ok"></span> Sales Invoice Template</li>
<li class="list-group-item off" style="padding: 19px;"><span class="glyphicon glyphicon-remove"></span> Import Logo</li>
<li class="list-group-item off" style="padding: 19px;"><span class="glyphicon glyphicon-remove"></span> Tracking Setup</li>
</ul>
<div class="try">
</div>
</div>
<!-- Pack 2-->
<div class="col-md-3" id="home-box">
<div class="pricing_header">
<h2>Platinum</h2>
<div class="space"></div>
</div>
<ul class="list-group">
<li class="list-group-item Displayonclick" id="Invoice1" hidden><span class="glyphicon glyphicon-ok" ></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxPlatinum1|id=rechange]</span>
[type=number|class=form-control|name=Contact_Sales_InvoicesPlatinum_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxPlatinum2|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_InvoicesTempPlatinum_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxPlatinum3|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_ImportLogoPlatinum_Table|min=0]
</div>
</li>
<li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxPlatinum4|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_TrackingSetupPlatinum_Table|min=0]
</div>
</li>
</ul>
<div class="try">
<p class="price">[type=number|class=form-control|name=PlatinumTotal|min=0]</p>
</div>
</div>
<!-- Pack 3-->
<div class="col-md-3" id="home-box">
<div class="pricing_header">
<h2>Gold</h2>
<div class="space"></div>
</div>
<ul class="list-group">
<li class="list-group-item Displayonclick" id="Invoice2" hidden><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxGold1|id=rechange]</span>
[type=number|class=form-control|name=Contact_Sales_Invoices_TableGold|min=0]
</div> </li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxGold2|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_InvoicesTempGold_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxGold3|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_ImportLogoGold_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxGold4|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_TrackingSetupGold_Table|min=0]
</div>
</li>
</ul>
<div class="try">
<p class="price">[type=number|class=form-control|name=GoldTotal|min=0]</p>
</div>
</div>
<!-- Pack 4-->
<div class="col-md-3" id="home-box">
<div class="pricing_header">
<h2>Silver</h2>
<div class="space"></div>
</div>
<ul class="list-group">
<li class="list-group-item Displayonclick" id="Invoice3" hidden><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxSilver1|id=rechange]</span>
[type=number|class=form-control|name=Contact_Sales_InvoicesSilver_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxSilver2|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_InvoicesTempSilver_Table|min=0]
</div>
</li>
<li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>
<div class="input-group">
<span class="input-group-addon beautiful">[type=checkbox|name=checkboxSilver3|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_ImportLogoSilver_Table|min=0]
</div>
</li>
<li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span>
<div class="input-group">
<span class="input-group-addon beautiful"> [type=checkbox|name=checkboxSilver4|id=checkbox1] </span>
[type=number|class=form-control|name=Contact_Sales_TrackingSetupSilver_Table|min=0]
</div>
</li>
</ul>
<div class="try">
<p class="price">[type=number|class=form-control|name=SilverTotal|min=0]</p>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
#details { font-family: "Quicksand", sans-serif; font-size: 60px; }
#home-box > h2 { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #75b1ae; }
.price { font-size: 25px; float: left; }
.pricing_header { background: none repeat scroll 0% 0% rgb(44, 62, 80); border-radius: 5px 5px 0px 0px; transition: background 0.4s ease-out 0s; }
.pricing_header h2 { text-align:center; line-height: 25px; padding: 15px 0px; margin: 0px; font-family: "Quicksand", sans-serif; font-weight: 400; color: #75b1ae; }
.list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; }
label {
display: block;
}
.off { text-decoration: line-through; color: rgb(86,86,86); }
.space {height: 2px; background-color: #75b1ae;}
body{
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
$(document).ready(function(){
$('#hideINVOICE').on('click', function(){
$('.Hideonclick').show()
$('.Displayonclick').hide()
});
$('#showINVOICE').on('click', function(){
$('.Displayonclick').show()
$('.Hideonclick').hide()
});
});
