How to Hide a DIV with jQuery

There are a lot of reasons why you might want to hide a portion of your web page: for example, there could be an image that you don’t want to show based on user type or an action may be available that lets the user hide a portion of the page.  Hiding/showing can add dynamism to a page and jQuery makes it easy.   If you look at some JavaScript examples of hiding a DIV you’ll notice that it takes quite a few lines of code to accomplish the task.

New to JavaScript?  Learn the Basics

If you have any experience with jQuery, you’ll already know that it provides a much simpler way to accomplish the same goal.  jQuery is a JavaScript library and the beauty of its power is that it hides much of the required detail under the covers and lets you write simple lines like

$( “DIVtarget”).hide( );

To completely understand the statement above and what follows you need to know some jQuery. The jQuery $( ) function is the main jQuery function called for most jQuery operations.  The string that is passed to $( ), in this example “DIVtarget”, is called a selector.  It tells the $( ) function to search through the Document Object Model (DOM) for any objects that match the provided selector – here a DIV with “DIVtarget” as an ID.  What is returned is a new jQuery object that contains the element (or set of elements) that satisfy the selector.  The hide ( ) method is passed to that returned object, resulting in the DIV named “DIVtarget” disappearing.  See the code in Figure One below for a working example.  You can take the example below and drop into a text file with an html extension and run it in your browser.  Let’s walk through the example and talk about what’s going on.

New to jQuery? Learn it Now at Udemy

Figure  One.

The first script in the example above simply points to the jQuery library.  The second script is where the action is.  The script starts by passing the “document” object to $ ( ).  The document object is part of the DOM.  The ready ( ) method guarantees that the anonymous function passed to it will not run until the DOM is fully constructed.  You see two click event handlers defined in the function.  The first passes the #hide selector to $ ( ) which tells jQuery we’re interested in the element in the DOM that contains “hide” as an identifier, which is the button labeled “Gone” as you can see in the example.  Then we attach another function to the click event for that button which passes #DIVtarget as a selector to $ ( ) and runs the hide ( ) method on the result.  Bingo! The DIV with the #DIVtarget id disappears.  How easy is that!  The following statement performs similar logic for the button with id=”show” and instead of hiding the DIV it shows it again.  Talk yourself through this one to be sure you understand what’s going on.

Hide ( ) supports a lot of functionality besides the simple use we put it to here.  The jQuery API documentation shows all the available permutations.  Let’s look at a couple of more advanced uses of hide ( ).

Hide (“swing”) passes a so-called easing function to hide ( ).  Easing functions specify the rate at which an animation occurs.  Native jQuery supplies only two such functions (“linear” is the other one) but many more are available as plug-ins, especially in jQuery UI. Use the example above and modify the hide ( ) with “swing” or “linear” to see the changes for yourself.

You can also control the speed at which hide ( ) disposes of the selected element or elements.  Two choices are available: hide (“slow”) and hide (“fast”).   The speeds are measured in milliseconds.  Slow equates to 600 milliseconds and fast to 200.  By the way, hide ( ) simultaneously changes the height, width, and opacity of the element it’s working on.

Take a jQuery UI course to master the language

Hide ( ) also supports a callback function that gets fired when the animation is finished.  Figure 2 shows the first hide ( ) from Figure 1 with a duration parameter (“slow”) and a callback function added.  Put this into your example and watch what happens.

Figure Two.

Now that you’re on your way with jQuery, you won’t be able to resist jQuery UI for very long.  JQuery UI is a set of user interface interactions, widgets, and themes that is built on top of the jQuery JavaScript library – just like jQuery itself is built on JavaScript.   An example of how jQuery UI extends the hide ( ) method will show you the power of jQuery UI.   First of all, let’s look at the extended signature of hide ( ) in jQuery UI.  Here it is:

hide (effect [,options] [,duration] [,complete])

So try changing the first click handler in our example to:

$(“#DIVtarget”).hide(“bounce”, {times: 4}, “slow”);

The DIV does a little dance before it goes away.  Note that you’ll need to add a <script> statement pointing at the jQuery UI library for this to work.   You can find the jQuery UI library to download at

http://code.jquery.com/

So don’t stop with hide ( ) .  Dive into the jQuery and jQuery UI API documentation and start experimenting.  There’s a bunch of other cool effects you can use to not only liven up your web pages but make them easier to use.  You can learn more about jQuery UI at jQuery UI in Depth at Udemy.