Hiding multiple div using same id

Question

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

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';
    }
}

we cannot do that using id's so try using class. id should be unique for each — swetha, May 16 '13 at 12:54
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, May 16 '13 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 use `getElementsByClassName()` or `getElementsByTagName` ... — RelevantUsername, May 16 '13 at 12:58

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

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

edited May 23 '17 at 11:43

Community

1
1

answered May 16 '13 at 12:56

PSR

39,804
41
111
151

score 0 · Answer 2 · answered May 16 '13 at 13:03

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.

score 0 · Answer 3 · answered May 15 '23 at 05:47

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>

Hiding multiple div using same id

3 Answers3