Below is my coding for creating tabs. In each i have one drop down when i select the value india in each tabs in the hidden textbox should display on the particular tab means if i select the value india in tab1 dropdown hidden textbox should not display tab2 and tab3 and i need to change w3-border red to #00a8a8 color
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("sendingType");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(
" w3-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
$(document).ready(function() {
$("#ddlPassport").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
$(document).ready(function() {
$("#ddlPassport1").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
$(document).ready(function() {
$("#ddlPassport2").change(function() {
if ($(this).val() == "Y") {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
.sendingType {
display: none;
}
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body class="w3-container">
<h2>Tabs in a Grid</h2>
<div class="w3-row">
<a href="#" onclick="openCity(event, 't1');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1
</div>
</a>
<a href="#" onclick="openCity(event, 't2');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div>
</a>
<a href="#" onclick="openCity(event, 't3');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div>
</a>
</div>
<br>
<div id="t1" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div id="t2" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport1">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport1" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div id="t3" class="w3-container sendingType">
<div class="form-group">
<label class="col-xs-1 control-label">dropdown</label>
<div class="col-xs-3">
<select name="country" class="form-control" id="ddlPassport2">
<option value="">Select a country</option>
<option value="Y">india</option>
<option value="N">america</option>
</select>
</div>
</div>
<div id="dvPassport2" style="display: none">
<div class="form-group">
<label class="col-xs-1 control-label">Text box</label>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</body>
2
Answers
You are using the same hidden textbox ID every time. Us the respective textbox id. Also you don’t need to use ready function every time. You can use once and add all the other function in it.