Hide an element initially with CSS and show it later with jQuery

Table of Contents

This post is to answer a question asked in the comments section of my "Show and hide an element with jQuery – Part 1 of 2" post from a couple of years ago. It’s a pretty simple question, asking how to have an element hidden with CSS at first and then show it with jQuery later. It might be triggered automatically, or when a button is clicked or the mouse hovering over something.

Example HTML

Here’s some example HTML where we have a button and a block of text:

<input type="button" value="Show Hidden Block" id="showHiddenBlock" />
<p id="initiallyHiddenBlock">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate dignissim ipsum, vel aliquam erat imperdiet eu.</p>

The id for the button is "showHiddenBlock" but it could be anything you like; I’ve just named it that to make it clear in this tutorial what it’s doing.

The paragraph of text has an id "initiallyHiddenBlock" and again this is just to make it clear of its purpose. In your HTML it would likely have some other id. It could just as easily be an image or some other element.

Example CSS

To hide the initiallyHiddenBlock paragraph at the start, add this to your CSS file or into a <style> section in the <head> section of your document. An external CSS file is preferred.

#initiallyHiddenBlock {
    display: none;
}

Change #initiallyHiddenBlock to the id you’ve used in your HTML.

Example Javascript – include jQuery

You’ll need jQuery included as an external script. This might be either a locally hosted copy or one served off a CDN. To include the current version at the time of writing this from the Google CDN add the following to your document’s <head> section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Example Javascript – show on click

Then either in an external Javascript file or within <script> tags in your document add this:

$(document).ready(function() {
    $('#showHiddenBlock').click(function() {
        $('#initiallyHiddenBlock').show();
    });
});

What this does is to bind a function to the ‘showHiddenBlock’ button so that when it is clicked it will show the hidden block.

Example Javascript – show after X seconds

If you wanted to automatically show the hidden block e.g. 5 seconds after the page has finished loading, you could add a timeout and show the block like this:

$(document).ready(function() {
    setTimeout(function() { $('#initiallyHiddenBlock').show() }, 5000);
}

Example Javascript – show and hide on mouseover/out

Or maybe show it when some other element is hovered over and then hide it when the mouse is moved away again:

$(document).ready(function() {
    $('#mouseRegion').hover(
        function() { $('#initiallyHiddenBlock').show() },
        function() { $('#initiallyHiddenBlock').hide() }
    );
});

Working examples

Now you’ve seen the code, try it out:

Use your browser to view the page source on those pages to see all the HTML.