How to close iframe from third partner after timeout in javascript - javascript

I have a script of a payment gateway:
<script src="https://assets.pagar.me/checkout/1.1.0/checkout.js"></script>
When the user click to pay an item I call the next code. It open a modal dialog into a iframe to fill data from credit card to pay the item.
My app will work in kiosk mode and I´d like to close the iframe after a timeout.
I have tried:
setTimeout(function(){
function closeWin() // Tested Code
{
var someIframe=document.
getElementById('easyXDM_PagarMeCheckout_default6958_provider')
.contentWindow.document;
}
closeWin()
},30000)
but it doesn't work. Here is How I call the function of the script to execute a payment:
UPADATE:
I achieve a way to find the iframe using:
var ifr=$('#easyXDM_PagarMeCheckout_default6958_provider', parent.document);
I am trying now:
ifr.remove()
but no success.
var checkout = new PagarMeCheckout.Checkout({
encryption_key: 'ek_test_f9cws0bU9700VqWE4UDuBlKLbvAAA',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
},
close: function() {
console.log('The modal has been closed.');
}
});
var params = {
"amount":128000,
"customerData":"true",
"paymentMethods":"boleto,credit_card",
"postbackUrl":"requestb.in/1234",
"items": [
{
id: '1',
title: 'Bola de futebol',
unit_price: 12000,
quantity: 1,
tangible: true
},
{
id: 'a123',
title: 'Caderno do Goku',
unit_price: 3200,
quantity: 3,
tangible: true
}
]
};
var ck=checkout.open(params);
Here is a copy of the iframe:
<iframe name="easyXDM_PagarMeCheckout_default3498_provider" id="easyXDM_PagarMeCheckout_default3498_provider" src="https://assets.pagar.me/checkout/1.1.0/modal.html?xdm_e=http%3A%2F%2Flocalhost&xdm_c=default3498&xdm_p=1" frameborder="0" style="z-index: 9999; background: transparent; border: 0px none transparent; overflow-x: hidden; overflow-y: auto; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
#document
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<title>Checkout</title>
<link href="//fonts.googleapis.com/css?family=Raleway:600,500,400" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:300,300italic,400,400italic,600,600italic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style/pagarme-ui.css?version=5">
<link rel="stylesheet" href="style/card.css?version=5">
<link rel="stylesheet" href="style/icons.css">
<link rel="stylesheet" href="style/mobile.css" media="only screen and (max-width: 600px)">
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="jquery.bez.min.js"></script>
<script src="jquery.color.min.js"></script>
<!--[if lte IE 7]>
<script src="json.min.js"></script>
<![endif]-->
<script src="raven.min.js"></script>
<script>
Raven.config('https://4a6f66d610de4a0ab3d822d95075cff2#sentry.pagar.me/3').install();
</script>
<script src="animations/default.js"></script>
<script src="card.js"></script>
<script src="easyXDM.js"></script>
<script src="modal.js"></script>
<!--[if lte IE 9]>
<link rel="stylesheet" href="style/pagarme-ui-ie8.css" />
<script src="animations/ie.js"></script>
<script src="modal-ie8.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="style/pagarme-ui-ie7.css" />
<![endif]-->
<link rel="stylesheet" href="style/pagarme-ui-ie.css">
</head>
<body>
<div id="pagarme-checkout-ui" style="opacity: 1;">
<div id="pagarme-checkout-header">
<span class="icon-pg-checkout-back"></span><span class="no-mobile"> Voltar</span>
<ul class="pagarme-checkout-step-indicator mobile show">
<li href="#" class="pagarme-checkout-choose-payment-method-bullet step-indicator-bullet active" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-step-buyer-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-customer-address-information-bullet step-indicator-bullet" style="margin-top: 0px;">•</li>
<li href="#" class="pagarme-checkout-credit-card-information-bullet step-indicator-bullet" style="margin-top: 0px;">•</li>
</ul>
<i class="icon-pg-checkout-close"></i>
</div>
<div id="pagarme-modal-loading" style="display: none;">
<div class="spinner"></div>
</div>
<div id="pagarme-modal-box" style="top: 0px; opacity: 1;">
<p id="pagarme-checkout-step-title"><span class="no-mobile">Qual a </span><span class="mobile-capitalized">forma</span> de pagamento<span class="no-mobile">?</span></p>
<p id="pagarme-checkout-amount-information">Total a pagar <span class="brand-color" style="color: rgb(26, 110, 225);">R$<span class="checkout-amount">1.280,00</span></span></p>
<ul class="pagarme-checkout-step-indicator no-mobile show">
<li href="#" class="pagarme-checkout-choose-payment-method-bullet step-indicator-bullet active" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-step-buyer-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-customer-address-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-credit-card-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
</ul>
<div class="pagarme-checkout-step hidden" id="pagarme-modal-box-step-boleto-installment-information" style="opacity: 0; display: none;">
</div>
<div class="pagarme-checkout-step hidden" id="pagarme-modal-box-step-boleto-only" style="opacity: 0; display: none;">
<div id="pagarme-checkout-boleto-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button>
Boleto bancário <span id="boleto-discount" class="payment-discount"></span>
<div id="boleto-helper-text" class="payment-method-helper-text boleto-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-buyer-information" style="opacity: 0; display: none; left: 100px;">
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-name" name="pagarme-buyer-name" placeholder="Nome" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-email" name="pagarme-buyer-email" placeholder="Email" type="email">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-document-number" name="pagarme-buyer-document-number" placeholder="CPF/CNPJ" type="text" pattern="[0-9]*" maxlength="14" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-ddd-field-container" class="pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-ddd" name="pagarme-buyer-ddd" placeholder="DDD" type="text" pattern="[0-9]*" maxlength="2" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-phone-number-field-container" class="pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-number" name="pagarme-buyer-number" placeholder="Número" type="text" pattern="[0-9]*" maxlength="10" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Continuar <span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step" id="pagarme-modal-box-step-choose-method" style="opacity: 1; left: 0px; display: block;">
<div id="pagarme-checkout-card-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button id="pagarme-credit-card-payment-method" class="brand-border-color" style="border-bottom-color: rgb(49, 125, 228);">
Cartão de crédito <span id="credit-card-discount" class="payment-discount"></span><br>
<div id="credit-card-helper-text" class="payment-method-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
<div id="pagarme-checkout-boleto-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button>
Boleto bancário <span id="boleto-discount" class="payment-discount"></span>
<div id="boleto-helper-text" class="payment-method-helper-text boleto-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-credit-card-information" style="opacity: 0; display: none; left: 100px;">
<div id="pagarme-checkout-card-container">
<div class="card">
<div class="front">
<p class="general expiration-label field">Valido ate</p>
<p class="general number field">•••• •••• •••• ••••</p>
<p class="general expiration field">MM/AA</p>
<p class="general name field">Nome completo</p>
<p class="amex cvv field">••••</p>
<p class="amex expiration-label field">Valido ate</p>
<p class="amex number field">•••• •••• •••• ••••</p>
<p class="amex expiration field">MM/AA</p>
<p class="amex name field">Nome completo</p>
</div>
<div class="back">
<p class="cvv field">•••</p>
</div>
</div>
</div>
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container brand-display">
<input id="pagarme-modal-box-credit-card-number" name="pagarme-credit-card-number" placeholder="Número" type="text" pattern="[0-9]*" maxlength="19" autocomplete="off">
<span class="brand-icon"></span>
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-name" name="pagarme-credit-card-name" placeholder="Nome (igual no cartão)" type="text" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-credit-card-expiration-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-expiration" name="pagarme-credit-card-expiration" placeholder="Validade" type="text" pattern="[0-9]*" maxlength="5" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-credit-card-cvv-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-cvv" name="pagarme-credit-card-cvv" placeholder="CVV" type="text" pattern="[0-9]*" maxlength="3" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div tabindex="-1" class="pretty-select-wrap">
<div id="pagarme-checkout-installments-container" class="form-group pagarme-checkout-input-container">
<div class="pretty-select-container">
<span class="placeholder installments-value">Parcelas</span>
<img src="images/select-icon.png">
<select id="pagarme-modal-box-installments" name="pagarme-installments" placeholder="Parcelas" style="display: none;"></select>
</div>
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="pretty-select-select-container hidden">
<div class="select-arrow"> </div>
<ul class="select-options"></ul>
</div>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Pagar (R$<span class="checkout-amount">1.280,00</span>)<span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-customer-address-information" style="opacity: 0; display: none; left: 100px;">
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-zipcode" name="pagarme-customer-address-zipcode" placeholder="CEP" type="text" pattern="[0-9]*" maxlength="9" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
<span class="pagarme-checkout-loading"><img src="images/loading.gif"></span>
</div>
<div id="pagarme-checkout-address-street-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-street" name="pagarme-customer-address-street" placeholder="Rua" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-number-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-number" name="pagarme-customer-address-number" placeholder="Núm." type="text" pattern="[0-9]*" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-complementary-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-complementary" name="pagarme-customer-address-complementary" placeholder="Complemento" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-neighborhood-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-neighborhood" name="pagarme-customer-address-neighborhood" placeholder="Bairro" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-city-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-city" name="pagarme-customer-address-city" placeholder="Cidade" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-state-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-state" name="pagarme-customer-address-state" placeholder="UF" type="text" maxlength="2" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Continuar <span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step hidden next" id="pagarme-checkout-error-container" style="opacity: 0; display: none; left: 100px;">
<div id="pagarme-checkout-error-header">
Transação não autorizada
</div>
<div id="pagarme-checkout-error-body"></div>
<a id="pagarme-checkout-error-back-button" href="">Preencher dados de cartão novamente</a>
</div>
<div class="clearfix"></div>
</div>
<div id="pagarme-checkout-footer">
<div id="footer-container">
<p id="pagarme-checkout-secure-connection"><span class="icon-pg-checkout-locker"></span> Você está em uma conexão segura</p>
<p id="pagarme-checkout-pagarme-brand"><span class="no-mobile">tecnologia </span><span class="icon-pg-checkout-pagarme-logo"></span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>
</body>
</html>
</iframe>

Related

php fails calling javascript function

trying to call a javascript function from a PHP web request ( if statement )but it fails tried to check if another script will run and when a test echo'<sciprt>alert('Called Succeed')</script>'; it worked and I thought if I write the whole function in the web request code block well solve the problem but it didn't, so what I'm missing here? where is the bug?
Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
$count = $_POST['productscount']
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(){
var formscount = <?php echo(json_encode($productscount)); ?>;
if (formscount > 0) {
active="";
for (i=0; i < formscount; i++) {
var str='active'
if (i > 0){
str = ''
}
$('#demo').append($('<div class="carousel-item '+str+'"> <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body"> <img src="..\\upload\\panadol.png" style="width:205px; height:205px;"> <div class="row justify-content-center"> <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a> </div> <hr /> <div class="card-text" style="font-family: hana; font-size:23px; color:black;"> <div class="row" style=" flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group product-name-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div> <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج"> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group dosage-form-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>نوع الدواء</option> <option value="1">أدوية</option><i class="fas fa-capsules"></i> <option value="2">مستلزمات الام والطفل</option> <option value="4">معدات طبية</option> <option value="4">بروتينات ومكملات غذائية</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group productqty-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group stock-code-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group chemicalcom-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group concentration-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group packsize-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group mandate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div> <input type="date" id="mandate_#" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group expdate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div> <input type="date" id="expdate_#" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> </div> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group sale-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>الخصم على المنتج</option> <option value="1">نعم</option><i class="fas fa-capsules"></i> <option value="2">لا</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group discou-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group bounsfor-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input> </div> </div> </div> <hr /> <center> <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"> <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a> </nav> </center> </div></div></div></div>')); event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<?
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<script> myFunction(); </script>';
}
?>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
<!-- The slideshow -->
<div class="carousel-inner canner">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev d-none d-md-block" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
</a>
<a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
<span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>

jQuery Find closest element not working

HTML:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello everyone as you can see I am looking for data-item value when user clicking on Addtocart button that located in class shopping_cart but it showing undefined. How can I solve this issue? why it finding the element.

Based on your markup, you need to go further up to .product class and then find its shopping_cart
alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));
Demo
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.product').find(".shopping_cart").data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Solution:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).parents().find('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Try this:
$(document).on('click', '.Addtocart button', function(event) {
alert($(this).closest('.product').find('.shopping_cart').data('item'));
});
This will work!!!

Bootstrap image with checkbox

I've got a little problem, I'm trying to have a simple image which you can click on and it will be checked or unchecked.
I found some bootstrap code online and tried it out on my project. Sadly, the code doesn't seem to work like it's suppose to on my localhost.
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
CSS:
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
JavaScript:
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
How it is suppose to look: codepen
My results: results
As you can see the checkbox isn't working and the positions are off.
I'm a beginner and I apologize for any confusion given.
Is there something that I'm doing wrong?

Please try this whole example, from your example it seems like that you haven't added some necessary css and jquery
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style class="cp-pen-styles">.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}</style></head><body>
<!--
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
} else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"))
e.preventDefault();
});
//# sourceURL=pen.js
</script>
</body>
</html>

Code:
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input1">
<label class="custom-control-label" for="input1">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input12">
<label class="custom-control-label" for="input12">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
Result would be similar to this:
Original copied: https://iqbalfn.github.io/bootstrap-image-checkbox/

Why bootstrap shows 2 tabs at the same time?

I'm developing a website with using bootsrap v4, and I'm struggling using tabs. As you may see when you click the 3rd or the last tab, and then click the first tab it shows 2 tabs at the same time and also when you keep clicking and alternating those tabs the problem goes away by it self.
What I'm doing wrong?
jsFiddle
body {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #868e96;
text-align: left;
}
.search-tabs>h1 {
font-weight: normal;
margin-bottom: 15px;
}
.search-tabs .tabbable>.nav-tabs li {
margin-bottom: -1px;
margin-right: 5px;
z-index: 0;
}
.search-tabs .tabbable>.nav-tabs li a.active {
background-color: #FF9F00;
}
.search-tabs .tabbable>.nav-tabs li a {
background: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
border: none !important;
color: #fff;
position: relative;
display: block;
padding: 10px 15px;
border-radius: 0;
}
.search-tabs .tabbable>.nav-tabs li a.active::before {
content: "";
display: block;
position: absolute;
background-color: #FF9F00;
width: 100%;
height: 5px;
top: -5px;
left: 0;
}
.search-tabs .tabbable>.nav-tabs li a .icon {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-right: 2px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
transition: all 0.2s ease-in-out;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<section class="search-tabs">
<h1>Está na hora de <b><span style="" class="morphext"><span class="animated flipInX">se perder</span></span></b></h1>
<section class="tabbable">
<ul class="nav nav-tabs">
<li class="nav-item"><a data-toggle="tab" href="#hotels-tab" class="nav-link active"><i class="icon mdi mdi-hotel"></i> <span class="hidden-sm-down">Hoteis</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#flights-tab" class="nav-link"><i class="icon fa fa-plane"></i> <span class="hidden-sm-down">Voos</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#events-tab" class="nav-link"><i class="icon fa fa-bolt"></i> <span class="hidden-sm-down">Actividades</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#rentcar-tab" class="nav-link"><i class="icon mdi mdi-car-hatchback"></i> <span class="hidden-sm-down">Rent Car</span></a></li>
</ul>
<section class="tab-content">
<section id="hotels-tab" role="tabpanel" class="tab-pane fade show active">
<section class="app-loading" style="min-height: 200px; display: none;"></section>
<section>
<h2>Pesquisar Hoteis</h2>
<form action="//hotels/search" method="get">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde vais?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 700px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Chegada - Saida</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos </label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças</label>
<select class="custom-select form-control">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Hoteis</button>
</form>
</section>
</section>
<section id="flights-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar voos baratos</h2>
<form action="/flights/-" method="get">
<section class="row">
<section class="col-md-12"><span class="trip-switch active">Ida e Volta</span> <span class="trip-switch">Só Ida</span></section>
</section>
<section class="row">
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>De onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Para onde?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Partida - Volta</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos</label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças </label>
<select class="custom-select form-control">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar voos</button>
</form>
</section>
</section>
<section id="events-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Hoteis</h2>
<form action="/activities//search" method="get">
<section class="row">
<section class="col-md-4">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-5">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Check in - Check out</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group">
<label>O que procura?</label>
<select class="form-control custom-select">
<option value="">Tudo</option>
<option value="1">Eventos</option>
<option value="2">Excurções</option>
<option value="2">Actividades</option>
<option value="3">Outros</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Actividades</button>
</form>
</section>
</section>
<section id="rentcar-tab" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Viaturas</h2>
<form action="/rent-car//search" method="get">
<section class="row">
<section if="hideLocation" class="col-md-4">
<section class="form-group form-group-icon-left"><i class="mdi mdi-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-8">
<section class="row">
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Quando?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-08-25 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Ate quanto?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-09-01 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Viaturas</button>
</form>
</section>
</section>
</section>
</section>
</section>

Here you go with a solution ( you may say it a work around ) https://jsfiddle.net/k0uv976k/5/
$('a[data-toggle="tab"]').click(function(){
$($(this).data('href')).show().addClass('show active').siblings().hide();
});
body {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #868e96;
text-align: left;
}
.search-tabs > h1 {
font-weight: normal;
margin-bottom: 15px;
}
.search-tabs .tabbable > .nav-tabs li {
margin-bottom: -1px;
margin-right: 5px;
z-index: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active {
background-color: #FF9F00;
}
.search-tabs .tabbable > .nav-tabs li a {
background: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
border: none !important;
color: #fff;
position: relative;
display: block;
padding: 10px 15px;
border-radius: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active::before {
content: "";
display: block;
position: absolute;
background-color: #FF9F00;
width: 100%;
height: 5px;
top: -5px;
left: 0;
}
.search-tabs .tabbable > .nav-tabs li a .icon {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-right: 2px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
transition: all 0.2s ease-in-out;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<section class="search-tabs">
<h1>Está na hora de <b><span style="" class="morphext"><span class="animated flipInX">se perder</span></span></b></h1>
<section class="tabbable">
<ul class="nav nav-tabs">
<li class="nav-item"><a data-toggle="tab" data-href="#hotels-tab" class="nav-link active"><i class="icon mdi mdi-hotel"></i> <span class="hidden-sm-down">Hoteis</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#flights-tab" class="nav-link"><i class="icon fa fa-plane"></i> <span class="hidden-sm-down">Voos</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#events-tab" class="nav-link"><i class="icon fa fa-bolt"></i> <span class="hidden-sm-down">Actividades</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#rentcar-tab" class="nav-link"><i class="icon mdi mdi-car-hatchback"></i> <span class="hidden-sm-down">Rent Car</span></a></li>
</ul>
<section class="tab-content">
<section id="hotels-tab" role="tabpanel" class="tab-pane fade show active">
<section class="app-loading" style="min-height: 200px; display: none;"></section>
<section>
<h2>Pesquisar Hoteis</h2>
<form action="//hotels/search" method="get">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde vais?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 700px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Chegada - Saida</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos </label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças</label>
<select class="custom-select form-control">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Hoteis</button>
</form>
</section>
</section>
<section id="flights-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar voos baratos</h2>
<form action="/flights/-" method="get">
<section class="row">
<section class="col-md-12"><span class="trip-switch active">Ida e Volta</span> <span class="trip-switch">Só Ida</span></section>
</section>
<section class="row">
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>De onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Para onde?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Partida - Volta</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos</label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças </label>
<select class="custom-select form-control">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar voos</button>
</form>
</section>
</section>
<section id="events-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Hoteis</h2>
<form action="/activities//search" method="get">
<section class="row">
<section class="col-md-4">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-5">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Check in - Check out</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group">
<label>O que procura?</label>
<select class="form-control custom-select">
<option value="">Tudo</option>
<option value="1">Eventos</option>
<option value="2">Excurções</option>
<option value="2">Actividades</option>
<option value="3">Outros</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Actividades</button>
</form>
</section>
</section>
<section id="rentcar-tab" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Viaturas</h2>
<form action="/rent-car//search" method="get">
<section class="row">
<section if="hideLocation" class="col-md-4">
<section class="form-group form-group-icon-left"><i class="mdi mdi-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-8">
<section class="row">
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Quando?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-08-25 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Ate quanto?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-09-01 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Viaturas</button>
</form>
</section>
</section>
</section>
</section>
</section>
I've used jQuery to active tabs and changed href to data-href in HTML.
Updated answer requested by OP
Here is the updated answer https://jsfiddle.net/k0uv976k/6/
Hope this will solve your problem.

Change tab color when button clicked

I have a multi-step form and i wanted to add a button at the bottom of the page so the user can click next instead of clicking on the tabs at the top.
The button works however, the tab's background color does not change when i click on next.
<div class="right-col">
<div class="profile-content"
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active">
Customer Info
</li>
<li>
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
<script>
$("#next").click(function(){
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
});
</script>
</div>
BEFORE
AFTER
Here's the CSS when i inspect element
element.style {
}
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}

You have to set id on li tag and give its color.
$(document).ready(function(){
$("#next").click(function(){
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
</style>
<div class="right-col">
<div class="profile-content">
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active" id="licustomer-tab">
Customer Info
</li>
<li id="lileads-tab">
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
</div>

try this script
var $tabs = $('.tabbable li');
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$("#test").css("background-color", "red");
});
$('#test1').on('click', function() {
$("#test").css("background-color", "white");
});
<form class="form-horizontal" action='/products/add/' method='post'>
<fieldset>
<div class="tabbable">
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Product</li>
<li>Offer</li>
</ul>
<div class="tab-content">
<!-- TAB 1 -->
<div class="tab-pane active" id="tab1">
<div class="control-group">
<label class="control-label" for="id_title">Title</label>
<div class="controls">
<input type="text" name="title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_manufacturer">Manufacturer</label>
<div class="controls">
<input type="text" name="manufacturer">
<span class="help-inline">
</div>
<div class="btn-group">
<button class="btn" id="nexttab" type="button">Next</button>
</div>
</div>
</div>
<!-- TAB 2 -->
<div class="tab-pane" id="tab2">
<div class="control-group">
<label class="control-label" for="id_condition">Condition</label>
<div class="controls">
<input type="text" name="condition">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_condition_note">Condition Note</label>
<div class="controls">
<input type="text" name="condition_note">
</div>
</div>
</div>
</div>
<hr class="border-line"> <!-- STYLED IN FORMS.CSS -->
</fieldset>
</form>
working fiddle click here

Categories