How to hide or show html tags with javascript -


i have 2 div tags in html code , have defined class can expand or hide them.the problem have fact when click on 1 of the value of other changes.

<html>      <body>         <form>             <script language="javascript">                 function setvisibility(id) {                     if (document.getelementbyid('btnshowhide').value == '-') {                         document.getelementbyid('btnshowhide').value = '+';                         document.getelementbyid(id).style.display = 'none';                     } else {                         document.getelementbyid('btnshowhide').value = '-';                         document.getelementbyid(id).style.display = 'inline';                     }                 }             </script>             <fieldset style="width: 600px;">                 <legend>                     <input type=button name=type id='btnshowhide' value='+' onclick="setvisibility('div1');" ;/>insert data:</legend>                 <div id="div1" style="display: none;">                     <label for="351fef76-b826-426f-88c4-dbaaa60f886b">name:</label>                     <textarea id="351fef76-b826   -426f-88c4-dbaaa60f886b" name="txtname" value="name" type="text" title="name:">name</textarea>                     <br>                     <label for="02973dcc-5677-417c-a9bf-1578f58923ef">family:</label>                     <textarea id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtfamiy" value="family" type="text" title="family:">family</textarea>                     <br>                 </div>             </fieldset>             <br>             <fieldset style="width: 600px;">                 <legend>                     <input type=button name=type id='btnshowhide' value='+' onclick="setvisibility('div2');" ;/>insert data:</legend>                 <div id="div2" style="display: none;">                     <label for="d8876943-5861-4d62-9249-c5fef88219fa">type of property</label>                     <select id="d8876943-5861-4d62-9249-c5fef88219fa" name="propertytype" value="" type="select" title="type of property"></select>                     <br>                 </div>             </fieldset>             <br>         </form>     </body>  </html> 

i tried changing ids of buttons nothing changed.

change buttons --

<input type="button" name="type" id="btnshowhide1" value="+" onclick="setvisibility('div1',this.id);";/>   ,   <input type="button" name="type" id="btnshowhide2" value="+" onclick="setvisibility('div2',this.id);";/> 

and use following function --

function setvisibility(id,buttonid) {   if(document.getelementbyid(buttonid).value=='-'){         document.getelementbyid(buttonid).value = '+';         document.getelementbyid(id).style.display = 'none';   } else{         document.getelementbyid(buttonid).value = '-';         document.getelementbyid(id).style.display = 'inline';   } } 

demo


Comments

Popular posts from this blog

Perl - how to grep a block of text from a file -

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

javascript - Animating array of divs; only the final element is modified -