CODEWITHSUNDEEP
javascriptjsp
S.S.Nath
S.S.Nath

Reputation: 35

Hiding multiple div using same id

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

Upvotes: 1

Views: 11814

Answers (3)

JON
JON

Reputation: 1013

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>

Upvotes: 0

Elle
Elle

Reputation: 3775

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.

Upvotes: 0

PSR
PSR

Reputation: 40318

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

Upvotes: 4

Related Questions