Rectangle 27 0

javascript How do I hide an HTML element before the page loads?


#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;    
}


 <a href="#" onclick="return false;">Expand Me</a>
 ///this way u can make a link to act like a button too

 <div id="toggleMe">  //this will be hidden during the page load
  //your elements
 </div>

///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
 $(document).ready(function () {
        $("a").click(function () {
            $('#toggleMe').toggle("slow"); //Animation effect
        });
    });
</script>

///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...
Note
Rectangle 27 0

javascript How do I hide an HTML element before the page loads?


<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>

Of course you could do this server-side as well, but maybe there's a good reason you don't want to do that (like, have the controls visible if the browser does NOT support javascript).

What you could do is insert a inline script tag at the end of the document, or immediately after the div with id "extraControls". Should be fire a little sooner than.

Note