<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 ---------->
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label" for="product_id">Enable Product</label>
<div class="col-md-4">
<label class="label-switch switch-primary">
<input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
<span class="lable"></span></label>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="product_id"> Attribute Set </label>
<div class="col-md-4">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="product_name">PRODUCT NAME</label>
<div class="col-md-4">
<input id="product_name" name="product_name" placeholder="PRODUCT NAME" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="sku"> SKU</label>
<div class="col-md-4">
<input id="sku" name="sku" class="form-control input-md" required="" type="text"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Price"> Price</label>
<div class="col-md-4">
<input id="price" name="price" placeholder="$" class="form-control input-md" required="" type="text"/>
<a href="#"> Advance Pricing</a>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="sku"> Tax Class</label>
<div class="col-md-4">
<input id="tax" name="tax" class="form-control input-md" required="" type="text"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="sku"> Quantity</label>
<div class="col-md-4">
<input id="qty" name="qty" class="form-control input-md" required="" type="number"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Stock Status"> Stock Status </label>
<div class="col-md-4">
<select class="form-control" id="stock_status">
<option>In Stock</option>
<option>Out of Stock</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Categories"> Categories </label>
<div class="col-md-4">
<select class="form-control" id="Categories">
<option>List</option>
<option>Clist</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="product_weight">PRODUCT WEIGHT</label>
<div class="col-md-4">
<input id="product_weight" name="product_weight" placeholder="PRODUCT WEIGHT" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="product_description">PRODUCT DESCRIPTION</label>
<div class="col-md-4">
<textarea class="form-control" id="product_description" name="product_description"></textarea>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="product_name_fr">PRODUCT DESCRIPTION FR</label>
<div class="col-md-4">
<textarea class="form-control" id="product_name_fr" name="product_name_fr"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="percentage_discount">PERCENTAGE DISCOUNT</label>
<div class="col-md-4">
<input id="percentage_discount" name="percentage_discount" placeholder="PERCENTAGE DISCOUNT" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="approuved_by">APPROUVED BY</label>
<div class="col-md-4">
<input id="approuved_by" name="approuved_by" placeholder="APPROUVED BY" class="form-control input-md" required="" type="text">
</div>
</div>
</form>
.switch{
opacity: 0;
position: absolute;
z-index: 1;
width: 18px;
height: 18px;
cursor: pointer;
}
.switch + .lable{
position: relative;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 18px;
min-width: 18px;
font-weight: normal;
cursor: pointer;
}
.switch + .lable::before{
cursor: pointer;
font-family: fontAwesome;
font-weight: normal;
font-size: 12px;
color: #32a3ce;
content: "\a0";
background-color: #FAFAFA;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 1px;
position: relative;
top: -1px;
}
.switch:checked + .lable::before {
display: inline-block;
content: '\f00c';
background-color: #F5F8FC;
border-color: #adb8c0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch + .lable {
margin: 0 4px;
min-height: 24px;
}
.switch + .lable::before {
font-weight: normal;
font-size: 11px;
line-height: 17px;
height: 20px;
overflow: hidden;
border-radius: 12px;
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
border: 1px solid #CCC;
text-align: left;
float: left;
padding: 0;
width: 52px;
text-indent: -21px;
margin-right: 0;
-webkit-transition: text-indent .3s ease;
-o-transition: text-indent .3s ease;
transition: text-indent .3s ease;
top: auto;
}
.switch.switch-bootstrap + .lable::before {
font-family: FontAwesome;
content: "\f00d";
box-shadow: none;
border-width: 0;
font-size: 16px;
background-color: #a9a9a9;
color: #F2F2F2;
width: 52px;
height: 22px;
line-height: 21px;
text-indent: 32px;
-webkit-transition: background 0.1s ease;
-o-transition: background 0.1s ease;
transition: background 0.1s ease;
}
.switch.switch-bootstrap + .lable::after {
content: '';
position: absolute;
top: 2px;
left: 3px;
border-radius: 12px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
width: 18px;
height: 18px;
text-align: center;
background-color: #F2F2F2;
border: 4px solid #F2F2F2;
-webkit-transition: left 0.2s ease;
-o-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.switch.switch-bootstrap:checked + .lable::before {
content: "\f00c";
text-indent: 6px;
color: #FFF;
border-color: #b7d3e5;
}
.switch-primary >.switch.switch-bootstrap:checked + .lable::before {
background-color: #337ab7;
}
.switch.switch-bootstrap:checked + .lable::after {
left: 32px;
background-color: #FFF;
border: 4px solid #FFF;
text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
$(function(){
// here the code for text minimiser and maxmiser by faisal khan
var minimized_elements = $('p.text-viewer');
minimized_elements.each(function(){
var t = $(this).text();
if(t.length < 500) return;
$(this).html(
t.slice(0,500)+'<span>... </span><a href="#" class="more btn btn-sm btn-primary"> Read More.. </a>'+
'<span style="display:none;">'+ t.slice(500,t.length)+' <a href="#" class="less btn btn-sm btn-danger"> close </a></span>'
);
});
$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
});
