I want to hide multiple div using the same script function.is it possible? i have hide one div... check my code
html code:
<div id="bookingDiv">
<table>
<tr>
<td>
<table>
<tr>
<td class="labelTd">
<label>Employee Name
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtEmployeeName" id="txtEmployeeName" readonly tabindex="6" value="<%=strEmployeeName%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label> Travel Date From
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" id="txtDateFrom" readonly name="txtDateFrom" size="11" maxlength="11" tabindex="4" value="<%=strDateFrom%>" style=" width : 136px;" />
</td>
</tr>
<tr>
<td class="labelTd">
<label> Purpose of Visit
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtPurposeOfVisit" value="<%=strPurpose%>" class="textArea-Medium" tabindex="5" style=" width : 144px;"></input>
</td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="labelTd">
<label>Designation
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtDesignation" readonly id="txtDesignation" tabindex="8" value="<%=strDesignation%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Employee Grade
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtEmployeeGrade" readonly id="txtEmployeeGrade" tabindex="7" value="<%=strEmployeeGrade%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Advance Amount Requested
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtAdvanceAmountReq" readonly id="txtAdvanceAmountReq" tabindex="10" value="<%=approvedAmt%>" size="8" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Additional Amount Requested
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtAdditionalAmountReq" readonly id="txtAdditionalAmountReq" tabindex="11" value="<%=strAdditionalAmountReq%>" size="8" maxlength="11" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
JS code:
function showDiv() {
var tmp1 = document.getElementById("txtTravelId");
if (tmp1.value == "") {
document.getElementById("bookingDiv").style.display = 'none';
} else {
document.getElementById("bookingDiv").style.display = 'block';
}
}
I want to hide multiple div using the same script function.is it possible? i have hide one div... check my code
html code:
<div id="bookingDiv">
<table>
<tr>
<td>
<table>
<tr>
<td class="labelTd">
<label>Employee Name
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtEmployeeName" id="txtEmployeeName" readonly tabindex="6" value="<%=strEmployeeName%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label> Travel Date From
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" id="txtDateFrom" readonly name="txtDateFrom" size="11" maxlength="11" tabindex="4" value="<%=strDateFrom%>" style=" width : 136px;" />
</td>
</tr>
<tr>
<td class="labelTd">
<label> Purpose of Visit
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtPurposeOfVisit" value="<%=strPurpose%>" class="textArea-Medium" tabindex="5" style=" width : 144px;"></input>
</td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="labelTd">
<label>Designation
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtDesignation" readonly id="txtDesignation" tabindex="8" value="<%=strDesignation%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Employee Grade
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtEmployeeGrade" readonly id="txtEmployeeGrade" tabindex="7" value="<%=strEmployeeGrade%>" size="11" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Advance Amount Requested
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtAdvanceAmountReq" readonly id="txtAdvanceAmountReq" tabindex="10" value="<%=approvedAmt%>" size="8" maxlength="11" />
</td>
</tr>
<tr>
<td class="labelTd">
<label>Additional Amount Requested
</label>
</td>
<td class="fieldTd">
<input type="text" class="txt-med2" style="color: blue" name="txtAdditionalAmountReq" readonly id="txtAdditionalAmountReq" tabindex="11" value="<%=strAdditionalAmountReq%>" size="8" maxlength="11" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
JS code:
function showDiv() {
var tmp1 = document.getElementById("txtTravelId");
if (tmp1.value == "") {
document.getElementById("bookingDiv").style.display = 'none';
} else {
document.getElementById("bookingDiv").style.display = 'block';
}
}
- 2 we cannot do that using id's so try using class. id should be unique for each – swetha Commented May 16, 2013 at 12:54
- 1 It really isn't clear what you are trying to do. Your question title implies that you are writing invalid HTML (which is a terrible idea, don't do that) while your HTML shows a layout table (eugh) with a bunch of labels that aren't associated with any inputs (see the for attribute) and then some JS which doesn't refer to anything in the HTML! – Quentin Commented May 16, 2013 at 12:55
-
Your javascript is using ID
bookingDiv, where is the tag with this ID in your HTML code ? And you can't use ID to loop elements, you'll have to usegetElementsByClassName()orgetElementsByTagName... – RelevantUsername Commented May 16, 2013 at 12:58 - iam using the id in the first line – S.S.Nath Commented May 16, 2013 at 13:03
3 Answers
Reset to default 4Id 's is unique.
If you use jQuery, then .You can use same class for all divs. $('.className').hide();
If you want solution in javascript
There's getElementsByClassName in some browsers, but it's not as widely supported as getElementById. SEE HERE
otherwise you can use different ids for diifferent divs then hide using ids
ID should be a unique value. However, to group divs together you can use the same class name. Here's an example.
<div id="name" class="myClass">...</div>
<div id="address" class="myClass">...</div>
<div id="email" class="myOtherClass">...</div>
jQuery allows you to hide multiple elements that have the same class name like so
$(".myClass").hide();
which will hide name and address divs but not the email one. .show(); makes them visible again.
Depending on what you intend to do, though, you can place everything you want to hide inside a div, and simply hide that div.
Try with "querySelectorAll"
function hideShowDiv(){
const samedivid = document.querySelectorAll("#samedivid");
for(let i=0;i<samedivid.length;i++){
const styles = window.getComputedStyle(samedivid[i]);
if(styles.visibility=='visible'){
samedivid[i].style.visibility='hidden';
}else{
samedivid[i].style.visibility='visible';
}
}
}body {
text-align: center;
}
#divTohide{
visibility:visible;
}
.hidebtn{
width:120px;
height:40px;
}<div id="samedivid">
<h1>Hi, This is the 1st DIV</h1>
</div>
<div id="samedivid">
<h1>Hi, This is the 2nd DIV</h1>
</div>
<div id="samedivid">
<h1>Hi, This is the 3rd DIV</h1>
</div>
<button class="hidebtn" onclick="hideShowDiv()">
<b>hide/show</b>
</button>