This post is a response to a question asked on my "Show and hide an element with jQuery – Part 1 of 2" article about how to hide text when the page loads and then show it with a button (or some other method to reveal the text at a later time).
Three possible methods
There are three ways I can think of doing this myself: in jQuery’s document ready, in some Javascript directly under the element to hide, or what I think is the best way to do it which is to hide the content initially with CSS and show it later with jQuery. Examples for each of these follow.
If you can think of other (or better) ways of achieveing this with jQuery and/or CSS then please feel free to leave a comment below.
In the examples, we’ll assume there’s some content with <div id="example"></div> which should be hidden when the page is first rendered and is subsequently displayed using $(‘#example’).show() or similar either from a button click or some other action.
Document ready
$(document).ready allows stuff to happen after the page has been loaded. 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();
});
This may be a fairly obvious way to do this but it’s not particularly ideal; the element will be displayed on the page until the page has finished loaded and will then hide. I wouldn’t recommend doing it this way myself, but rather one of the other two ways suggested below.
Directly after the element
By adding the Javascript to hide the element directly after it, it will disappear directly after being rendered. This has the same downside as the document.ready method but at least it will disappear straight away so as to almost not be noticable.
<script type="text/javascript">
$('#example').hide();
</script>
The upside of using this method is that if you are defensively coding for Javascript being switched off, the element will be displayed even if there’s no JS. (Of course, you may not want it displayed even if Javascript is not enabled).
Using CSS
The 3rd way is to simply hide the element with CSS (either inline or in the style sheet) and then show it subsequently with jQuery. This way there are no issues with the element showing and then immediately hiding.
In the CSS file:
#example {
display: hidden;
}
Inline:
<div id="example" style="display: hidden"></div>
I wouldn’t normally advocate putting the style inline, but it can be useful if you need to toggle the display on and off on the server-side.
Using CSS is usually my preferred way of hiding an element initially which would then subsequently be revealed with Javascript.
Another approach
Have a read of my jQuery Animated Information Box post for another approach to hiding and showing content. In the example on that page there are several links alongside a box and content within the box changes depending on which link is clicked.
Other methods?
If you have other suggestions of how this can be handled, or improvements to my above examples, feel free to leave a comment below.