JQuery Div - Using the Div with JQuery JS JavaScript

"Where Am I?" -- You're Reading Chapter 1 Part 2

Congratulations on finishing Chapter 1 part 1! If you came here directly and skipped chapter 1 part 1, go back and read it now. It covers JQuery basics. This page won't make sense unless you know those.

JQuery and the DIV... Visual Effects

If you're for information on adding and removing classes for the DIV with JQuery, that's covered in Chapter 2. I suggest you read all 3 parts of Chapter 1 before moving on to Chapter 2.

Don't let me confuse you. In Chapter 1 Part 1, you clicked directly on an image to hide it. There are more options. In this section of part 1, we're going to give id's to buttons to manipulate a div.

Here is the sample div, and the buttons we're going to use.

The code for this example for the div named GreenDiv is a lot more exciting then the actual div. Let's all pretend there's something terrific and exciting here!

Here's the code, first the style (to go in the CSS file):

 #GreenDiv { color: green; border: 4px green dashed;
             margin: 2px; padding: 10px; width: 300px; }

Here's the HTML code for the buttons we're going to use with the JQuery. Notice we have them all id names:

<div id="GreenDiv">
The code for this example for the div named GreenDiv
is a lot more exciting then the actual div.  Let's
all pretend there's something terrific and exciting here!
</div>

<input type="button" id="GreenHide" value="Hide the Green!" />
<input type="button" id="GreenShow" value="Show the Green!" />
<input type="button" id="GreenSlideUp" value="Slide Up Green!" />
<input type="button" id="GreenSlideDown" value="Slide Down Green!" />

Cool. Now, the script section is really easy after Chapter 1 part 1 that you just finished:

<script><!--
$(document).ready(function() {
   $('#GreenHide').click(function(){
     $('#GreenDiv').hide();
   });
   $('#GreenShow').click(function(){
     $('#GreenDiv').show();
   });
   $('#GreenSlideUp').click(function(){
     $('#GreenDiv').slideUp('fast');
   });
   $('#GreenSlideDown').click(function(){
     $('#GreenDiv').slideDown('fast');
   });
});
// --></script>

You should be able to figure this out. For example, the first function, when GreenHide is clicked, it asks GreenDiv to hide. Pretty awesome. It's easy now that you learned how functions work!

This example isn't going to be practical in the real world. It lets you click "Show the Green!" when GreenDiv is already showing! But it gives you the basic ideas of how JQuery will easily work. Let's try one called RedDiv that hides and shows buttons.

This is a small red div. Not too exciting.

Here's the CSS code for the red example:

 #RedDiv { color: red; border: 4px red solid;
           margin: 2px; padding: 10px; width: 300px; }

Here's the HTML code for the div and the two buttons:

<div id="RedDiv">
This is a small red div.  Not too exciting.
</div>

<input type="button" id="ShowRed" value="Show Red Div!" />
<input type="button" id="HideRed" value="Hide Red Div!" />

The JQuery JavaScript code is a little tricky. When the web page is ready, red div is shown by default. So, this means, when the web page is ready, we need to hide the ShowRed button. After that, when ShowRed is clicked, we hide the ShowRed button and show HideRed button. When HideRed is clicked, we hide the HideRed button and show the ShowRed button.

This will make more sense in code:

<script><!--
$(document).ready(function() {
  $('#ShowRed').hide(); // when the document is ready, just hide the show button

   $('#ShowRed').click(function() {
     $('#RedDiv').show();
     $('#ShowRed').hide(); // hide the show button
     $('#HideRed').show(); // show the hide button
   });
   $('#HideRed').click(function() {
     $('#RedDiv').hide();
     $('#HideRed').hide(); // hide the hide button
     $('#ShowRed').show(); // show the show button
   });
});
// --></script>

Whew. A lot of code, but we did a lot with it. Now, it would be easier if we just used toggle() but we need to move on to the boring... loading the actual Library. Without loading the JQuery JS Library, none of this code will work. But it's pretty easy...

Continued (next section)...

JQuery - Next Section Coming Soon. Back to Chapter List