Menu
The hide() method in jQuery is used for hiding the selected web elements.
jQuery hide() Method The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none.
To hide an element, set the style display property to “none”. document.
This is probably the most obvious way to hide the element ready for it to be displayed later on, either placing it in a <script> tag somewhere on the page or in one of your Javascript files: $(document). ready(function() { $('#example'). hide(); });
div.hidden
{
display: none
}
<div id="extraControls" class="hidden">
</div>
$(document).ready(function() {
$("div#extraControls").removeClass("hidden");
});
Make a css class
.hidden {
display: none;
}
Add this to any element you don't want to be visible when loading the page. Then use $("div#extraControls").show(); to display it again.
With CSS3 you can actually hide content until a page loads by taking advantage of the :only-child selector.
Here is a demonstration of how to do this. The basic idea is that CSS while loading will add a single node to the DOM while loading that node and its child nodes. Further, once a second child is added to the given parent node the :only-child selector rule is broken. We match against this selector and set display: none to hide the given node.
<!doctype html>
<html>
<head>
<title>Hide content until loaded with CSS</title>
<style type="text/css" media="screen">
.hide-single-child > :only-child {
display: none;
}
</style>
</head>
<body>
<div class='hide-single-child'>
<div>
<h1>Content Hidden</h1>
<script>
alert('Note that content is hidden until you click "Ok".');
</script>
</div>
<div></div>
</div>
</body>
</html>
In CSS:
#extraControls { display: none; }
Or in HTML:
<div id="extraControls" style="display: none;"></div>
#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 ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With