<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row">
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-10 bhoechie-tab-container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
<div class="list-group">
<a href="#" class="list-group-item active text-center">
Your info
</a>
<a href="#" class="list-group-item text-center">
Company info
</a>
<a href="#" class="list-group-item text-center">
Authoring<br>Tools
</a>
<a href="#" class="list-group-item text-center">
LMS/LCMS
</a>
<a href="#" class="list-group-item text-center">
Content
</a>
<a href="#" class="list-group-item text-center">
Training
</a>
<a href="#" class="list-group-item text-center">
Support
</a>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
<div class="bhoechie-tab-content active">
<!-- Personal details -->
<center>
<form class="form-horizontal" role="form">
<fieldset>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">Personal Details</h4>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="entry_533376474" class="form-control" placeholder="First Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="entry.1293716159" class="form-control" placeholder="Last Name" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="entry.1063981074" class="form-control" placeholder="Email Address" tabindex="3">
</div>
</fieldset>
</form>
</center>
</div>
<div class="bhoechie-tab-content">
<!-- Company details -->
<center>
<form class="form-horizontal" role="form">
<fieldset>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">Company Details</h4>
<div class="form-group">
<input type="text" name="company_name" id="entry.962416545" class="form-control" placeholder="Company Name" tabindex="4">
</div>
<div class="form-group">
<input type="text" name="address_1" id="entry.1543784239" class="form-control" placeholder="Address" tabindex="5">
</div>
<div class="form-group">
<input type="text" name="address_2" id="entry.942884894" class="form-control" placeholder="Address Line 2" tabindex="6">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="city" id="entry.389696746" class="form-control" placeholder="city" tabindex="7">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="state" id="entry.1610815105" class="form-control" placeholder="state" tabindex="8">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="post_code" id="entry.1777645046" class="form-control" placeholder="post code" tabindex="9">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="country" id="entry.2101518291" class="form-control" placeholder="country" tabindex="10">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="Phone" id="entry.479348863" class="form-control" placeholder="phone (include country code)" tabindex="11">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="0">Start of Financial Yr</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<!-- Products -->
<div class="bhoechie-tab-content">
<center>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">We sell ...</h4>
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-2" data-color="primary">Storyline</button>
<input type="checkbox" class="hidden" id="group_67746185_1" />
</span>
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-1" data-color="primary">Studio</button>
<input type="checkbox" class="hidden" id="group_67746185_2"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-2" data-color="primary">Captivate</button>
<input type="checkbox" class="hidden" id="group_1372097857_1"/>
</span>
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-1" data-color="primary">Lectora</button>
<input type="checkbox" class="hidden" id="group_1372097857_2"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-2" data-color="primary">iSpring</button>
<input type="checkbox" class="hidden" id="group_1372097857_4"/>
</span>
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-1" data-color="primary">eDoceo</button>
<input type="checkbox" class="hidden" id="group_1372097857_3"/>
</span>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-2 ">
<div class="input-group">
<span class="input-group-addon">Other</span>
<input id="entry_1372097857_other_option_response" name="prependedtext" class="form-control" placeholder="please specify" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<div class="bhoechie-tab-content">
<!-- LMS - LCMS -->
<center>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">We also sell ...</h4>
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-4" data-color="primary">Articulate Online</button>
<input type="checkbox" class="hidden" id="group_67746185_4" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-4" data-color="primary">Moodle</button>
<input type="checkbox" class="hidden" id="group_1619215440_1"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-4" data-color="primary">Totara</button>
<input type="checkbox" class="hidden" id="group_1619215440_3"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-4" data-color="primary">Blackboard</button>
<input type="checkbox" class="hidden" id="group_1619215440_5"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-4 col-md-offset-4" data-color="primary">Docebo</button>
<input type="checkbox" class="hidden" id="group_1619215440_4"/>
</span>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-2 ">
<div class="input-group">
<span class="input-group-addon">Other</span>
<input id="entry.1619215440.other_option_response" name="prependedtext" class="form-control" placeholder="please specify" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<div class="bhoechie-tab-content">
<!-- Content -->
<center>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">We develop and/or supply ...</h4>
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Library Content</button>
<input type="checkbox" class="hidden" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Custom Characters</button>
<input type="checkbox" class="hidden" id="group_67746185_6" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Custom Templates</button>
<input type="checkbox" class="hidden" id="group_67746185_7"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Content Development</button>
<input type="checkbox" class="hidden" id="group_1037842233_3"/>
</span>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-2 ">
<div class="input-group">
<span class="input-group-addon">Other</span>
<input id="entry.1037842233.other_option_response" name="prependedtext" class="form-control" placeholder="please specify" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<!-- Training -->
<div class="bhoechie-tab-content">
<center>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">We provide training on ...</h4>
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Articulate Products</button>
<input type="checkbox" class="hidden" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Other Products</button>
<input type="checkbox" class="hidden" id="group_1037842233_4"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Instructional Design</button>
<input type="checkbox" class="hidden" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Content Development</button>
<input type="checkbox" class="hidden" />
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-6 col-md-offset-3" data-color="primary">Customer Classroom Content</button>
<input type="checkbox" class="hidden" id="group_1037842233_5"/>
</span>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-2 ">
<div class="input-group">
<span class="input-group-addon">Other</span>
<input id="prependedtext" name="prependedtext" class="form-control" placeholder="please specify" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<!-- train section -->
<div class="bhoechie-tab-content">
<center>
<h4 style="margin-top: 15px; margin-bottom 15px; color:#55518a">We sell the following support products...</h4>
<form class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-8 col-md-offset-2" data-color="primary">Articulate PMP Support</button>
<input type="checkbox" class="hidden" id="group_67746185_3"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-8 col-md-offset-2" data-color="primary">Other Articulate Support</button>
<input type="checkbox" class="hidden" id="group_67746185_8"/>
</span>
</div>
<div class="form-group">
<span class="button-checkbox">
<button type="button" class="btn col-md-8 col-md-offset-2" data-color="primary">Other Product Support</button>
<input type="checkbox" class="hidden" id="group_1037842233_8"/>
</span>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2 ">
<div class="input-group">
<span class="input-group-addon">Other</span>
<input id="prependedtext" name="prependedtext" class="form-control" placeholder="please specify" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</center>
</div>
<!-- hotel search -->
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-home" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Hotel Directory</h3>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-cutlery" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Restaurant Diirectory</h3>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Credit Card</h3>
</center>
</div>
</div>
</div>
</div>
</div>
/* bhoechie tab */
div.bhoechie-tab-container{
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #ddd;
margin-top: 20px;
margin-left: 50px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #5A55A3;
background-image: #5A55A3;
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #5A55A3;
}
div.bhoechie-tab-content{
background-color: #ffffff;
/* border: 1px solid #eeeeee; */
padding-left: 20px;
padding-top: 10px;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
