JQuery not showing/hiding element

JQuery not showing/hiding element - javascript

I'm simply trying to have JQuery show/hide a div. I've tried using Javascript instead and that still does not work. I've tested to make sure that everywhere in my JS script is being reached. It just isn't applying and I don't know why. Thank you for any help you can give.
Javascript
$(document).ready(function() {
startup();
$('select').material_select();
$('ul.tabs').tabs();
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
function startup() {
$("#Assignments").hide();
$("#ClassView").hide();
}
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
function tabswitch(x) {
if (x == 1) {
$("#Calender").show();
$("#Assignments").hide();
$("#ClassView").hide();
} else if (x == 2) {
$("#Calender").hide();
$("#Assignments").show();
$("#ClassView").hide();
} else if (x == 3) {
$("#Calender").hide();
$("#Assignments").hide();
$("#ClassView").show();
}
}
CSS
#sidebar p {
text-align: center;
color: white;
font-size: 18px;
}
#sideInterior p {
color: black;
}
.tabs a:link {
font-family: monospace;
color: white
}
.tabs a:hover {
color: gray;
}
.tabs a:visited {
color: white;
}
.tabs a:active {
color: white;
}
body {
background-color: #bdbdbd;
}
.Accordion {
background-color: white;
}
li {
margin-left: 5px;
margin-right: 5px;
}
HTML
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="newStyle.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.js"></script>
<script type="text/javascript" src="JS.js"></script>
<meta charset="utf8">
<title>Scheduling_Main</title>
</head>
<nav>
<div class="nav-wrapper blue darken-4">
Scheduling Project
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Profile
</li>
<li>Settings
</li>
<li>Help
</li>
</ul>
</div>
</nav>
<body>
<div id="2ndNav" class="row nav-wrapper blue">
<div class="col s3 blue" id="sidebar">
<p>Add to your schedule
<p>
</div>
<div class="col s9" id="tabSpace">
<ul class="tabs blue">
<li class="tab col s3">Calender
</li>
<li class="tab col s3">Assignments
</li>
<li class="tab col s3">Class View
</li>
<div class="indicator white" style="z-index:1"></div>
</ul>
</div>
</div>
<div class="row">
<!--start of sidebar-->
<div class="col s3">
<ul class="collapsible popout" data-collapsible="accordion">
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add semester</div>
<!--start of "add semester"-->
<div class="collapsible-body">
<div class="input-field">
<input id="Semester_Title" type="text" class="validate">
<label for="Semester_Title">Semester Title</label>
</div>
<div class="startDate">
<label for="Semester_Start">Start Date</label>
<input id="Semester_Start" type="date" class="datepicker">
</div>
<div class="endDate">
<label for="Semester_End">End Date</label>
<input id="Semester_End" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add course</div>
<!--start of "add course"-->
<div class="collapsible-body">
<div class="input-field">
<select>
<!--list of semesters go here-->
<option value="" disabled selected>Choose the semester</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Course_ID" type="text" class="validate">
<label for="Course_ID">Course_ID</label>
</div>
<div class="input-field">
<input id="Course_Title" type="text" class="validate">
<label for="Course_Title">Course Title</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add assignment</div>
<!--start of "add assignment"-->
<div class="collapsible-body">
<div class="input-field">
<select class>
<!--list of classes go here-->
<option value="" disabled selected>Choose the class</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Assignment_Title" type="text" class="validate">
<label for="Assignment_Title">Assignment Title</label>
</div>
<div class="endDate">
<label for="Due_Date">Due Date</label>
<input id="Due_Date" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
</ul>
</div>
<div>
<!--tab stuff goes here-->
<div id="#Calender" class="col s9">
<p>Calender Test</p>
</div>
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
</div>
</div>
</body>
</html>

I've changed your code. Please see if this is what you want:
[enter link description here][1]
Just change id name.
[1]: https://jsfiddle.net/tyqsa12u/enter code here

Your HTML elements should not have # in front of their ids. Its just used in CSS selector to refer to them.
Replace
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
with
<div id="Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="ClassView" class="col s9">
<p>Class Test</p>
</div>
and it should work.

Related

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!!!

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.

Fail to change the thumbnail product image based on the options value in a select box

First, sorry for my poor English. I know you guys may think that this is a duplicate question but it is not.
My question is based on below question instead of copy：change the src value of an image based on the options value in a select box
I have tried all jQuery codes which were suggested by users on the above question but still not work for my thumbnail product.
Here is my jQuery code, it can run on only 1 thumbnail. If I used the same jQuery code for 2 thumbnails, the error appears. When I choose color, the right thumbnail image will synchronize with the left one. Here is my jsfiddle: https://jsfiddle.net/fw800cq7/21/
I am new so i cannot post the failed image.
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="img-swap">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="im-swap">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>
Actually, I have used two different ids and jQuery codes to fix this issue.
You can run it here: Here is my jsfiddle: https://jsfiddle.net/fw800cq7/24/
I am new so i cannot post the success image.
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="img-swap">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap1" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap1" id="img-swap1">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>
However, it seems so redundant. If I try to add a new thumbnail, I must repeat the code again in jQuery. The question is that: How to use only 1 id and 1 jQuery code for all thumbnails and work well.
Ps. I am very new in JQuery, I am looking for an answer can copy. However, I am willing to learn if you give me the answer which do not instantly fix my problem. Thank you guys.

here is your working fiddle : https://jsfiddle.net/mxymj424/
You can do this with single change listener.
First keep unique id and name both select and image with same.
for example : image name= img-swap_1 and select id = img-swap_1
on change event get the id of select and use that id to change the image src.
$(document).ready(function(){
$(".color-select" ).change(function(){
var id=this.id;
$("img[name="+id+"]").attr("src",$(this).val());
});
});
/* Removes the default 20px margin and creates some padding space for the indicators and controls */
.text-blk .carousel {
margin-bottom: 10px;
padding: 0px;
}
.text-blk .carousel-control {
width:0%;
}
.text-blk .carousel-control.left {
left: -5px;
}
.text-blk .carousel-control.right {
right: -5px;
}
/* Reposition the controls slightly */
/*3粒點*/
/* Changes the position of the indicators */
.text-blk .carousel-indicators {
right: 50%;
top: auto;
bottom: -20px;
margin-right: -20px;
font-size:30px;
}
/* Changes the colour of the indicators */
.text-blk .carousel-indicators .active {
background: #00C851;
}
.text-blk .carousel-indicators li {
background: #ffbb33;
}
.carousel-control .glyphicon-chevron-left , .glyphicon-chevron-right{
color:#000;
}
/*My setting*/
.carousel-inner img {
height:100%;
width:100%;
}
.item .thumbnail .caption {
padding: 2px;
color: #333;
}
.item .thumbnail:hover,
.thumbnail:focus,
.thumbnail.active {
border-color: #4bc6ff;
}
.item .thumbnail img:hover {
outline:1px solid #4bc6ff;
}
.item .title {
font-size:18px;
color:#31708f;
margin:0px 0px 2px 0px ;
font-weight:bold;
}
.item .cm {
font-size:12px;
margin:0px 0px 5px 0px ;
font-weight:none;
color: #757575;
}
.item .form-inline {
margin:0px 0px 5px 0px ;
font-weight:none;
}
.item .divider {
height: 1px;
margin:0px 0px 5px 0px; /*上右下左*/
overflow: hidden;
background-color: #e5e5e5;
}
.item .price {
font-size: 15px;
margin: 2px 2px 2px 2px ;
color: #000;
font-weight:bold;
}
.item .right {
float:right;
}
.item .left {
float:left;
}
<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap_1" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs color-select" name="img-swap" id="img-swap_1">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap_2" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs color-select" name="img-swap1" id="img-swap_2">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>

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

Form(Outside div call through ajax) for upload file says Undefined index of file

We are using dashboard for admin purpose in which we are calling different forms on content pane through ajax call, where calling simple registration form and submitting it works but when i call form with file upload in it, it didn't work for me.!
Form gets submitted but file upload says undefined index of file name.!
here is my dashboard code
in my sidebar menu this is the code where i call the other divs
<ul class="sidebar-menu">
<li class="header">Company</li>
<li><i class="fa fa-upload"></i> <span>Upload Documents</span></li>
<li><i class="fa fa-download"></i> <span>View Documents</span></li>
<li><i class="fa fa-bar-chart"></i> <span>Generate Reports</span></li>
<li><i class="fa fa-list"></i> <span>View Company</span></li>
<li class="treeview">
<i class="fa fa-user-plus"></i> <span>Register Company</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li></i> <span>Register Parent Company</span></li>
<li></i> <span>Register Child Company</span></li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
Content pane where code gets merged (ajax call)
<section id="div1" class="content">
<div id="loading-image" class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
</section>
Javascript for ajax call
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading-image').hide();
});
function docupld(){
$("#loading-image").show();
$("#div1").load("docupld.php");
}
function docview(){
$("#loading-image").show();
$("#div1").load("docview.php");
}
function reports(){
$("#loading-image").show();
$("#div1").load("reports.php");
}
function pcompreg(){
$("#loading-image").show();
$("#div1").load("pcompreg.php");
}
function ccompreg(){
$("#loading-image").show();
$("#div1").load("ccompreg.php");
}
function compview(){
$("#loading-image").show();
$("#div1").load("compview.php");
} function load_home(){
$("#loading-image").show();
$("#div1").load("cmpreg1.php");
}
</script>
this is the div i call
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Upload Document</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-12">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-globe"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-file"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form" id="fupload" method="POST" enctype="multipart/form-data"">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select Parent Pan Number</label>
<select class="form-control select2" name="panno" style="width: 100%;">
<option selected="selected" >AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Tan Number</label>
<select class="form-control select2" name="tanno" style="width: 100%;">
<option selected="selected">AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</div>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<ul class="list-inline">
<div class="col-md-3">
<div class="form-group">
<label>Select Financial year</label>
<select class="form-control select2" name="year" style="width: 100%;">
<option selected="selected">2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-3">
<div class="form-group">
<label>Select Quarter</label>
<select class="form-control select2" name="quarter" style="width: 100%;">
<option selected="selected">Q1(Apr, May, Jun) </option>
<option>Q2 (July, Aug, Sept) </option>
<option>Q3 (Oct, Nov, Dec) </option>
<option>Q4 (Jan, Feb, Mar) </option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Form Type</label>
<select class="form-control select2" name="formtype" style="width: 100%;">
<option selected="selected">Form 24Q</option>
<option>Form 26Q</option>
<option>Form 27Q</option>
</select>
</div><!-- /.form-group -->
</div>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<ul class="list-inline">
<div class="col-md-3">
<div class="form-group">
<label>Select File Type</label>
<select class="form-control select2" name="ftype" style="width: 100%;">
<option selected="selected">Acknowledgement receipt(s) from bank</option>
<option>Acknowledgement receipt(s) from Income tax department</option>
<option>FORM16 A</option>
<option>Software Generated Files </option>
</select>
</div><!-- /.form-group -->
</div>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select File</label>
<input type="file" name="ufile"></input>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Enter Details</label>
<input type="text" name="fnote" ></input>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<button type="submit" name= "submit" class="btn btn-primary">Submit</button>
</div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
<script src="plugins/select2/select2.full.min.js"></script>
<script>
$(".select2").select2();
$("#fupload").submit(function(e) {
var url = "processdocupld.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#fupload").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.

JQuery not showing/hiding element - javascript

I've changed your code. Please see if this is what you want: [enter link description here][1] Just change id name. [1]: https://jsfiddle.net/tyqsa12u/enter code here

Related

jQuery Find closest element not working

Why bootstrap shows 2 tabs at the same time?

Fail to change the thumbnail product image based on the options value in a select box

Change tab color when button clicked

Form(Outside div call through ajax) for upload file says Undefined index of file

Categories

Resources