Hide and Show simple effects

Jquery Course

• Revealing Hidden Elements
• Check if an element is visible or hidden
• Effects with toggle() method

In this tutorial are presented some basic effects that you can create with jQuery.

Hiding Elements

To hide an element on a page, use the hide() method.
Syntax:

$('selector').hide('duration');

- "duration" - (optional) indicates the speed of the hiding animation. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.

Example:

<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on a <span> with class="cls", hide its parent
  $('span.cls').click(function(){
    $(this).parent().hide('slow');
  });
});
--></script>

<div>Free Web Development Courses, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Other Free Web programming Courses on coursesweb.net... <span class="cls">Close</span>.</div>

The code above hides (with a slow animation) the elements which contain a <span> tag with class="cls", when the user click on that <span>.
To see the effect, click on each "Close" word:
- The parent() method returns the parent element.
- $(this).parent() - returns the parent element of the current object.
In the example above, returns the HTML tag in which the <span> tag is included. In this case, the hide() method will hide the parent tag and all its content (including the <span> that is clicked).
If you want to hide the current object, use:   $(this).hide();
To hide a specific element, use:   $('#theElement').hide();

• If you want to execute some instructions after the hiding is complete, you can use the following syntax:

$('selector').hide('duration', function() {
  // code to execute
});

Example:

<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on a <span> with class="cls", hide its parent
  $('span.cls').click(function(){
    $(this).parent().hide('slow', function() {
      alert('Closed');
    });
  });
});
--></script>

<div>Free Web Development Courses, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Other Free Web programming Courses on coursesweb.net... <span class="cls">Close</span>.</div>

This time we added a function with an alert() to be executed once the hiding animation is complete.
To see the effect, click on each "Close" word:

Revealing Hidden Elements

To reveal a hidden element (which usualy has display:none;), use the show() method.
Syntax:

$('selector').show('duration');

- "duration" - it is optional, indicates the speed of the showing animation. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.

To execute some instructions after the showing is complete, you can use the following syntax:

$('selector').show('duration', function() {
  // code to execute
});

Example:

<script type="text/javascript"><!--
$(document).ready(function() {
  // reveal the tag with id="idd", when the tag with id="btn" is clicked
  $('#btn').click(function(){
    $('#idd').show('slow', function() {
      $('#btn').hide(650);
    });
  });
});
--></script>

<div id="idd" style="display:none;">Free Web Development Courses, jQuery tutorial.</div>
<button id="btn">Show</button>

This code displays the following result, when the user clicks the "Show" button, the <div> with id="idd" is revealed slowly, then once the animation is complete the button will be hid (in 650 milliseconds).
Click on the "Show" button to see the efect.

Check if an element is visible or hidden

To check if an element is visible, you can use this code:

if ($('#theID').is(':visible')) {
  // code to execute when is visible
}

To test if an element is hidden, you can use this code:

if ($('#theID').is(':hidden')) {
  // code to execute when is hidden
}

Example:

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on the tag with id="btn"
  $('#btn').click(function() {
    // if the tag with id="idd" is hidden, reveals it and turn its text blue
    if ($('#idd').is(':hidden')) {
      $('#idd').show('slow').css('color', 'blue');
    }
    else if ($('#idd').is(':visible')) {
      // else, if the tag with id="idd" is visible, sets a background color
      $('#idd').css('background', '#cdfecd');
    }
  });
});
--></script>
<div id="idd" style="display:none;">Div tag initially hidden.</div>
<button id="btn">Click</button>

The <div> is initially hidden, when the user clicks on the button "Click" first time, the <div> is revealed (with blue text), when the user clicks on the button second time, sets a background to that DIV.
To see this effect, click twice on this button:
• You can use ":visible" and ":hidden" directly with selectors ("#theID:visible") and ("#theID:hidden"), to select the object when it's visible, respectively hidden.
So, an optimized variant of the code in the example above is this code (the effect will be the same):

$(document).ready(function() {
  // when click on the tag with id="btn"
  $('#btn').click(function() {
    $('#idd:visible').css('background', '#cdfecd');       // adds background to visible #idd
    $('#idd:hidden').show('slow').css('color', 'blue');   // shows the hidden #idd and and adds color
  });
});

Effects with toggle() method

The toogle() method changes whatever state the object currently has, hides the element when it's visible, and shows it when it's hidden.

$('selector').toogle('duration');

- "duration" - (optional) indicates the speed of show/hide effect. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.

To execute some instructions after the effect is complete, you can use the following syntax:

$('selector').toogle('duration', function() {
  // code to execute
});

Example:

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on the tag with id="btn"
  $('#btn').click(function() {
    // change the state of the "#idd"
    $('#idd').toggle(800, function() {
      // change the button text according to the state of the "#idd" 
      if ($('#idd').is(':visible')) {
        $('#btn').text('Hide');
      } else {
        $('#btn').text('Show');
      }
    });
  });
});
--></script>
<div id="idd">Content that will be hidden and displayed.</div>
<button id="btn">Hide</button>

The code above changes the state (show/hide) of the <div> with id="idd", then uses the is(':visible') instruction to check if this DIV is visible or not, and accordind to its state changes the text in the button.
To test this example, click on the button below.

<div>Web Programming and Development</div>

h2 {
  text-decoration: underline;
}

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6