facebook facebook facebook facebook facebook


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


5 Comments to Tutorial: hide DIV with Javascript

 Subscribe in a reader Or, subscribe via email:
Enter your email address: 



  1. January 11, 2012 at 2:51 am | Permalink

    Hi Victor:
    First of all, I thank YOU.
    Then, afterwards, let me tell you my short story and you’ll understand why I’m thanking you for the ["Hide DIV with Javascript] post listed on this webpage.
    In the last ’24 hours, or so,’ I was in search of a “solution” > Problem: I’m a Painter trying to display a webpage of a ‘Painting” without a glaringly obtrusive div (explaining some silly, but important stuff) that must be shown at first, but then offer the option of being hidden (so as not to be: obtrusive). I spent hours (about seven of them) trying to find a solution, but all I got was a silly standard (from a bunch of overly wise webguys –too techy) where you first have to click a button that in turn, gives you the absurd only alternative of clicking again to get what the first button was supposed to do (namely hide the div), but only acts as a wasteful requirement that the user click twice, to get a single result. Your solution is far more elegant (appropriately discovered around 3:00 am, the morning after my initial, 7 hr ~ afternoon stretch of dismal & fruitless search for a proper “solution” :) –and much more efficient when CSS is applied, which in the end, turned out to be exactly what I had envisioned from the start: an option to click on the “obtrusive” DIV to make it “disappear”, leaving behind a very unobtrusive little button saying “show” that could be clicked, to “regenerate” the DIV, should the user so require. I mention “ELEGANCE” in the sense that your solution requires only two lines of text (ok, actually three in the head + the two in the body), where the [silly] guys demand (depending on the web-source) eight to ten lines of javascript ‘non-sense’ in the Head, plus a doubt-full anchor in the body (definitely not working with JQuery) that resulted in a rather awkward (clunky) ‘operationality’ in the body.

    Less, in most ways, more .

    Thanks again,

    –Alfonse


  2. January 11, 2012 at 3:01 am | Permalink

    addendum to last line in the previous:

    Less, <<>> in most ways, MUCH more.


  3. January 11, 2012 at 3:08 am | Permalink

    Weird synchronicity: in between the two sets of should have appeared the word ” is ” , but failed twice. Therefore insert it mentally to get the actual message.


  4. January 11, 2012 at 3:16 am | Permalink

    this is ridiculous, but here we go (computers are so stupid): in between the following words from the last entry: ‘sets of ___ should” two opposing caret symbols should have appeared, alluding to the caret symbols in the original message.

    Thanks again

    –Alfonse

    p.s. How do you pronounce your last name, anyway?


Leave a Reply