[jQuery] Hiding and Showing Elements

Hiding and Showing content dynamically can be impressive effects on your web pages. jQuery lets you do this quickly and easily. It is not just visibility feature. jQuery can hide/show elements with animations.

 

1. Hiding Elements

The easiest way to hide an element is to use the “hide()” function.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Hide Image" />
$(document).ready(function () {
  $('#btn1').click(function () {
    $('#img1').hide();
  });
});

 

2. Hiding Elements Themselves

If you want to hide an element when it is clicked, you can use the “this” keyword.

<div>Hello, World! If you click me, I will disappear.</div>
$(document).ready(function () {
  $('div').click(function () {
    $(this).hide();
  });
});

 

3. Hiding Elements with Animation

If you pass a duration with the “hide()” function, jQuery hides the element with the animated effect (fading out).

Durations are given in milliseconds; The strings ‘fast’ (200 ms) and ‘slow’ (600 ms) can be supplied too.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Hide Image" />
$(document).ready(function () {
  $('#btn1').click(function () {
    $('#img1').hide('slow');
  });
});

 

4. Showing Elements

The “show()” function is used to show elements. You can provide the duration for animated effects.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Hide Image" />
<input type="button" id="btn2" value="Show Image" />
$(document).ready(function () {
  $('#btn1').click(function () {
    $('#img1').hide(1000);
  });
  $('#btn2').click(function () {
    $('#img1').show(2000);
  });
});

 

5. Toggling Visibility

Rather than using 2 buttons to hide and show an element, you can use one button and the “toggle()” function.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Hide Image" />
$(document).ready(function () {
  $('#btn1').toggle(
    function () { $('#img1').hide(2000); $(this).attr('value', 'Show Image'); },
    function () { $('#img1').show(2000); $(this).attr('value', 'Hide Image'); }
  );
});

 

6. Toggling – Shortcuts

If the “toggle()” function is used without any function arguments, it hides/shows the element. In other words, it calls show() and hide() alternatively.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Toggle Image" />
$(document).ready(function () {
  $('#btn1').click( function() {
    $('#img1').toggle('slow');
  });
});

The “slideToggle()” function display or hide the matched elements with a sliding motion.

$(document).ready(function () {
  $('#btn1').click( function() {
    $('#img1').slideToggle('slow');
  });
});

The difference between the “toggle()” and “slideToggle()” is the animation.  The “toggle()” function animates the width, height, and opacity of the element simultaneously. The “slideToggle()” function animates the height of the element (up/down movement).

 

7. Callback Function

All functions mentioned here – hide/show/toggle/slideToggle – can have a callback function. A callback function is executed when the animation effect is finished.

Let’s run the example in section 5 again.

<img id="img1" src ="..." alt="test" />
<input type="button" id="btn1" value="Hide Image" />
$(document).ready(function () {
  $('#btn1').toggle(
    function () { $('#img1').hide(2000); $(this).attr('value', 'Show Image'); },
    function () { $('#img1').show(2000); $(this).attr('value', 'Hide Image'); }
  );
});

It takes 2 seconds to show/hide the image. Therefore, you can see the button’s text is changed before the animation is finished. You can change this behavior using callback functions.

$('#btn1').toggle(
  function () { $('#img1').hide(2000, function () { $('#btn1').attr('value', 'Show Image'); }); },
  function () { $('#img1').show(2000, function () { $('#btn1').attr('value', 'Hide Image'); }); }
);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s