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'; } }
Comments
Post a Comment