Victorelu » javascript http://victorelu.com Romanian studying in Aarhus Wed, 30 Jun 2010 21:33:29 +0000 en hourly 1 Tutorial: hide DIV with Javascript http://victorelu.com/tutorial-hide-div-with-javascript/ http://victorelu.com/tutorial-hide-div-with-javascript/#comments Fri, 10 Apr 2009 10:54:48 +0000 Victor http://victorelu.com/?p=12 Ok, so I am giong to show you the easiest way to hide a DIV with Javascript. The effect is nice if you tweak it a little bit and this is just to be going you on with.

I am going to write the code of the page here and then I will explain the important actions which take place. It is not the best html code ever but as I said, this is not important.

    <html>
    <head>
    <script type="text/javascript">

    function hidediv()
    { document.getElementById("mydiv").style.display="none"; }
    function showdiv()
    { document.getElementById("mydiv").style.display="block"; }

    </script>
    </head>
    <body>
    <div id="mydiv">This is the text that hides or shows</div>
    <input type="submit" value="Hide!" onclick="hidediv()">
    <input type="submit" value="Show!" onclick="showdiv()">
    </body>
    </html>

Ok, so it wasn’t that hard, was it? Maybe the thing that looks the hardest is the javascript code located in the head section of the html code but then again, let’s check it out:

function hidediv()
    { document.getElementById("mydiv").style.display="none"; }

Alright so, hidediv() is the name of the function and the next line is self explanatory. document.getElementById(”mydiv”).style.display=”none” does exactly what it says: it searches the document for the element with the id “mydiv” and sets it’s display style to none. Take care because getElementById is case sensitive!

All we have to do next is to call the function on the click of the button”<input type=”submit” value=”Hide!” onclick=”hidediv()“> and our DIV hiding is done. Hope this will help! :) For a demo, click here

]]> http://victorelu.com/tutorial-hide-div-with-javascript/feed/ 0