{"id":2003,"date":"2009-10-09T21:03:43","date_gmt":"2009-10-10T01:03:43","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=2003"},"modified":"2009-10-22T19:04:49","modified_gmt":"2009-10-22T23:04:49","slug":"how-to-add-flair-to-your-actions-with-jquery-part-2-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2009\/how-to-add-flair-to-your-actions-with-jquery-part-2-javascript-tutorial\/","title":{"rendered":"How to Add Flair to your Actions with jQuery – Part 2 – Javascript Tutorial"},"content":{"rendered":"

Welcome back to part 2 of Adding Flair to your Actions with jQuery! If you missed Part 1<\/a>, go ahead and read that first, or just move ahead!<\/p>\n

Basic hide and show <\/h1>\n

The basic .hide() <\/i> and .show() <\/i> methods, without any parameters, can be thought of as smart shorthand methods for .css(‘display’,’string’) <\/i>, where ‘string’ <\/i> is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown, with no animation. <\/p>\n

The .hide() <\/i> method sets the inline style attribute <\/b> of the matched set of elements to display:none <\/i>. The smart part here is that it remembers the value of the display <\/i> property—typically block <\/i> or inline <\/i>—before it was changed to none <\/i>. Conversely, the .show() <\/i> method restores the matched set of elements to whatever visible display property they had before display:none <\/i> was applied. <\/p>\n

For more information about the display property and how its values are visually represented in a web page, visit the Mozilla Developer Center at https:\/\/developer.mozilla.org\/en\/CSS\/display\/ and view examples at https:\/\/developer.mozilla.org\/samples\/cssref\/display.html<\/a>. <\/em> <\/p>\n

This feature of .show() <\/i> and .hide() <\/i> is especially helpful when hiding elements whose default display property is overridden in a stylesheet. For example, the element has the property display:block <\/i> by default, but we might want to change it to display:inline <\/i> for a horizontal menu. Fortunately, using the .show() <\/i> method on a hidden element such as one of these tags would not merely reset it to its default display:block <\/i>, because that would put the on its own line. Instead, the element is restored to its previous display:inline <\/i> state, thus preserving the horizontal design. <\/p>\n

A quick demonstration of these two methods can be set up by adding a second paragraph and a “read more” link after the first paragraph in the example HTML: <\/p>\n

<\/p>\n

 
 
Text Size <\/div>