Jump to content

Div tag not hiding!!


kvijayhari

Recommended Posts

hi , i have a problem in this code.the div tag is not hiding and when i click the button it hides and then visible on the page,here is my code , find the mistake i've done,

<scrip t language=javascript>function hide(){   var id1=document.getElementById("abc");   id1.style.display = 'none';}</scrip t><table><tr><td>  <div id="abc">	 Hello  </div>  <form>	   <input type=submit value=hide onclick=hide()>  </form></td></tr></table>

Link to post
Share on other sites

My skills are pretty rusty, but maybe something like this?

<script language=javascript>function hide() {   var id1 = document.getElementById('abc');   id1.style.display = 'none';}</script><table><tr><td>  <div id="abc">	 Hello  </div>  <form>	   <input type=submit value=hide onclick=java script:hide()>  </form></td></tr>

</table>

Link to post
Share on other sites
<script type="text/javascript">function ToggleHide(){   var id1 = document.getElementById("abc");   id1.style.display = (id1.style.display == '') ?'none' :'';}</script><table><tbody><tr><td>  <div id="abc">	 Hello  </div>  <form>	   <input type="button" value="hide" onclick="ToggleHide()" />  </form></td></tr></tbody></table>

Forgive me that I converted it into Xhtml :)And a little extension, to toggle the hiding instead of permanent change.

Link to post
Share on other sites

you can do the exact same thing but changing the submit button to a regulat html button and moving the function execution to a onclick int he button instead of the onsubmit of th form, that way you avoid a page refresh.If you had a large page that took a while to load this would be a bad idea because if it was done the other way it woudl happen instantly without refreshing the entire pageEDIT: just like you did :)

Link to post
Share on other sites
You guys know how to make the hiding function a default? Or how to toggle the value of the button to "Show" when hiding?
I don't know what you mean with default, but the text ion the button can easily be changed according the hide state, with this extension:
<script type="text/javascript">function ToggleHide(){   var id1 = document.getElementById("abc");   id1.style.display = (id1.style.display == '') ?'none' :'';   document.forms["myForm"].elements["Toggle"].value = (id1.style.display == '') ?'hide' :'show';}</script><table><tbody><tr><td> <div id="abc"> Hello </div> <form name="myForm"> <input type="button" name="Toggle" value="hide" onclick="ToggleHide()" /> </form></td></tr></tbody></table>
Link to post
Share on other sites

Thanks for that!I meant that when entering the page for the first time, the text is shown.. I want it to be hidden, and when I press "Show", the texts is shown.. Like on a spoilers, that you don't want them to be shown right when you go on to the site.

Link to post
Share on other sites

Then use this :)

<script type="text/javascript">function ToggleHide(){ var id1 = document.getElementById("abc"); id1.style.display = (id1.style.display == '') ?'none' :''; document.forms["myForm"].elements["Toggle"].value = (id1.style.display == '') ?'hide' :'show';}</script><table><tbody><tr><td><div id="abc" style="display:none">Hello</div><form name="myForm"><input type="button" name="Toggle" value="show" onclick="ToggleHide()" /></form></td></tr></tbody></table>
Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...