kvijayhari Posted August 24, 2006 Share Posted August 24, 2006 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 comment Share on other sites More sharing options...
S@m Posted August 24, 2006 Share Posted August 24, 2006 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 comment Share on other sites More sharing options...
aspnetguy Posted August 24, 2006 Share Posted August 24, 2006 change type=submit to type=buttonA submit button refreshes the page undoing the hiding div Link to comment Share on other sites More sharing options...
Jack McKalling Posted August 24, 2006 Share Posted August 24, 2006 (edited) <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. Edited August 24, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
aspnetguy Posted August 24, 2006 Share Posted August 24, 2006 Your way does work Dan but I wouldn't recommend it. Why do a whole page refresh for a simple javascript task? Link to comment Share on other sites More sharing options...
Jack McKalling Posted August 24, 2006 Share Posted August 24, 2006 You are right, I didn't realised that. Above post edited Link to comment Share on other sites More sharing options...
aspnetguy Posted August 24, 2006 Share Posted August 24, 2006 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 comment Share on other sites More sharing options...
Jack McKalling Posted August 24, 2006 Share Posted August 24, 2006 I wasn't aware of the page refresh in the beginning, and I know how to avoid it Link to comment Share on other sites More sharing options...
kvijayhari Posted August 25, 2006 Author Share Posted August 25, 2006 hi guys , thanks 4 ur answers , i haven't noticed that simple attribute.now it worked nice. Link to comment Share on other sites More sharing options...
Golanlan Posted August 25, 2006 Share Posted August 25, 2006 You guys know how to make the hiding function a default? Or how to toggle the value of the button to "Show" when hiding? Link to comment Share on other sites More sharing options...
Jack McKalling Posted August 25, 2006 Share Posted August 25, 2006 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 comment Share on other sites More sharing options...
Golanlan Posted August 25, 2006 Share Posted August 25, 2006 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 comment Share on other sites More sharing options...
Jack McKalling Posted August 25, 2006 Share Posted August 25, 2006 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now