I want to hide multiple div using the same script function.is it possible? i have hide one div… check my code
Html
<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>
JavaScript Code
function showDiv()
{
var tmp1=document.getElementById("txtTravelId");
if(tmp1.value=="")
{
document.getElementById("bookingDiv").style.display = 'none';
}
else
{
document.getElementById("bookingDiv").style.display = 'block';
}
}
Best Answer
Id 's
is unique.If you use
jQuery
, then .You can use sameclass
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 HEREotherwise you can use different ids for diifferent divs then hide using ids