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 comment
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 comment
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.

Edited by Dan The Prof
Link to comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...