Home

jQuery Effects And Animations

Show / Hide

jQuery Effects: Show, Hide and Toggle

SYNTAX: $(“CSS selector”).show(speed), $(“CSS selector”).hide(speed), and $(“CSS selector”).toggle(speed)

While not exactly animation, there are three major jQuery effects that are used by many developers/designers that are common tasks for many pages: Show, Hide, and Toggle.

It is important to note that when you add an effect that makes an element DISAPPEAR from the page (e.g., hide()) it is still a part of the Document Object Model (DOM) and can be accessed AGAIN to make the element REAPPEAR on the page via another effect (e.g., show()). Its CSS display property is set to none and the element no longer takes up visual space on the page, so other elements may move to fill its place. This is akin to the concept of absolute positioning (AP) where an element is removed from the normal document flow and surrounding elements fill its space.

  1. The show() method will make an object visible IF it is not already shown on the page; otherwise nothing happens.
  2. The hide() method will make an object invisible IF it is not already hidden on the page; otherwise nothing happens.
  3. The toggle() method is the best of both worlds of the show() and hide() methods, in that it will TOGGLE the visibility based on the CURRENT visibility of an object on the page. As a result, there is little need to use the show() and hide() methods when you use the toggle() method.

HIDE METHOD

While not practically, if you were to write the following code in a blank HTML page framework, the red box would disappear from the page when it loads.

Create an object:

  1. First, create an object using a div element within a standard HTML framework:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Effects</title>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    NOTE:  You could target any HTML page element.

  2. Below the title element, wrap the following CSS ID selector around a style element to style the <div> tag that was just created.

    <title>jQuery Effects</title>
    <style>
    #myBox{width:100px; height:100px; background:red; position:absolute; left:200px; margin-top:20px;}
    </style>

    Give the object a name:

  3. Give the div element an id:

    <div id ="myBox"></div>

    CHECK POINT: You should see a red box display on the page in the Design View 200px from the left edge of the browser.

    Tell the object to do something:

  4. Write the following script element below the title tag to connect to the jQuery CDN framework:

    <title>jQuery Effects</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    NOTES:
    - There may be a newer version of the framework available at jquery.com.
    - You ALWAYS need to link to a jQuery library either locally or remotely and only once per page.

  5. Write the following document ready method below the previous script element inside its own script element. Include the blank line.

    <script>
    $(document).ready(function(e) {

    }); // end of document ready method
    </script>

    TIPS:
    - In Dreamweaver, all you have to type is $(document).r and then press the ENTER key and Dreamweaver will "write" the rest of the code block for you. How cool is that!.
    - Also, you could create a snippet to include both the link to the jQuery CDN and the jQuery shell and give it a trigger name of jq. All you would than have to do is type "jq" and press the TAB key to implement the jQuery framework in any Dreamweaver file you create. How cool is that!!!!

    NOTES:
    -     The $(document).ready(function(e) { //code goes here...}); is the "wrapper" used for all jQuery code.
    - To target a HTML element itself without an ID or Class, use its tag name (e.g., h1).
    - The code above can actually be placed on a SINGLE LINE. However, it is broken into three lines so that the function can be readily seen.
    - It is common practice to include a comment (// end of document ready method) after the line of code that completes a code block. This help to distinguish other code blocks that typically will be nested inside or along side of other code blocks.

  6. Add the following highlighted code into the blank line of the jquery wrapper.

    <script>
    $(document).ready(function(e) {
    $("#myBox").hide();
    }); // end of document ready method
    </script>

  7. CHECK POINT: Save the file and test the page in a browser. You should see the red box immediately disappears when the page loads.

Adding an event handler

More practically, you would want some type of user interaction (e.g., button click, mouse hover) to hide an object. To prevent code from executing immediate when a page load you can “wrap” the code in a function and then provide an avenue for the function to run the code (e.g., via a button click, etc.).  Normally, you will use one object (e.g., a button) to control another object (e.g., the red box).

Create an object:

  1. Create a button ABOVE the div element in the body of the page:

    <button>Hide Box</button>
    <div class="myBox"></div>

    Give the object a name:

  2. Give the button an ID name:

    <button id = "hideBoxButton">Hide Box</button>

    Tell the object to do something:

  3. Wrap the code ($("#myBox").hide();) with a click event handler:

    $(document).ready(function(e) {
     $("#hideBoxButton").click(function()
    {
    $("#myBox").hide();
    }); // end of  hideBoxButton click event handler
    }); // end of document ready method

    NOTE: It is best practice to add the three symbols “});” (I call a sideway block-head code block: ) on a separate line so that you ensure the code blocks are nested correctly. It is also best practice to place a comment after each method or function so that you can distinguish them from other methods or functions (e.g., // end of  hideBoxButton click event handler).

  4. CHECK POINT: Save the file and test the page in a browser by clicking on the Hide Box button. You should see the red box disappear only when the button is clicked and not when the page first loads as before. Again, that's because the code to hide the button is wrapped within a function and needs to be invoked by an event (e.g., button event in this case).
ADVANCED TIP:

If you wanted to hide the red box when the box itself is clicked and not use a button at all, you could delete the button tag and then modify the code to read:

$("#myBox").click(function(){
$("#myBox").hide();
});

Now that we have added a button to hide the red box, let’s create another button that will show the red box again.

Create an object and give it a name:

  1. Copy the Hide Box button code and paste it on the next line and modify the code to read:
    TIP: Click in the current line and press CTRL+D to duplicate the current line.

    <button id = "hideBoxButton">Hide Box</button>
    <button id = "showBoxButton">Show Box</button>

    Tell the object to do something:

  2. Copy the Hide Box code and paste it below the current code and modify the code to read:
    TIP: Select all three lines and press CTRL+D to duplicate all of the current lines.

    $("#hideBoxButton").click(function(){
    $("#myBox").hide();
    }); // end of hideBoxButton click event handler

    $("#showBoxButton").click(function(){
    $("#myBox").show();
    }); //end of showBoxButton click event handler

  3. Save the file and test the page in a browser by first clicking on the Hide Box button. Then, click on the Show Box button. You should see the red box disappear when you click the Hide Box button and then reappear when you click the Show Box button.

NOTE: If you click on the Show Box button again, nothing happens because the red box is already shown. Click on the Hide Box button again and then the Show Box to toggle to red box on and off.

While creating two buttons to toggle the visibility of the red box is OK, there may be times when you want one button to show AND hide the red box. The toggle() method is ideal when you want to toggle between show and hide with a SINGLE button.

Create an object and give it a name:

  1. Copy the Show Box button code and paste it on the next line and modify the code to read:
    TIP: Click in the current line and press CTRL+D to duplicate the current line.

    <button id="showBoxButton">Hide Box</button>
    <button id="showhideBoxButton">Show / Hide Box</button>

  2. Copy the Show Box code and paste it below the current code and modify the code to read:
    TIP: Select all three lines and press CTRL+D to duplicate all of the current lines.

    $("#showBoxButton").click(function(){
    $("#myBox").show();
    }); // end of showBoxButton click event handler

    $("#showhideBoxButton").click(function(){
    $("#myBox").toggle();
    }); // end of showhideBoxButton click event handler

  3. Save the file and test the page in a browser by clicking on the Show / Hide Box button. You should see the red box appears and reappears IMMEDIATELY as you repeatedly click on it.

    Optional: Since the Show Button and Hide Button are no longer needed, you can delete them along with their corresponding code that you created for them earlier if you want to.

ADVANCED TIP:
If you are an experience programmer, you know that you could have written a conditional if/else statement to create the same functionality. Using the built-in jQuery toggle method is so much easier.

However, beside the simply show/hide when using the toggle method, you can provide two named functions of your own separated by commas to do whatever you want.  For example, you can write the following code to have the red box grow and change opacity when clicked on:

NOT WORKING...

$(“#myBox”).toggle( changeOpacity, changeSize);

function changeOpacity() {
$(“#myBox”).css(opacity:”.5”);
}

function changeSize() {
$(“#myBox”).css(width:”.5”);
}

IMPORTANT NOTE: To appreciate the power of jQuery motto, "Write Less. Do More", you would need to write all of the JAVASCRIPT code below to do the SAME thing that JQUERY was able to do with only a few lines of jQuery code and a lot easier implementation.

<script>
window.onload = function() {
myButtonVariable.addEventListener("click", showHideBox);
function showHideBox()     {
var myBoxVariable = document.getElementById("myBox");
if (myBoxVariable.style.display === "block")
     {
         myBoxVariable.style.display = "none";
     }
   else
     {
        myBoxVariable.style.display = "block";
     }
   }
} // end of window.onload code block
</script>
< Previous Topic     Next Topic >