Javascript – Hiding multiple div using same id

javascriptjsp

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&nbsp;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&nbsp;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 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