...

Library - JQuery

Back to Course

Lesson Description


Lession - #559 JQuery HideShow


The hide(>
method
hides the selected elements. Tip: this can be similar to the CSS property display:none. Note: Hidden elements won't be displayed at all (no longer affects the layout of the page>
.

The show(>
method
shows the hidden, selected elements.

Note: show(>
works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden>
.

Example


<html>  
<head> 
 <title> jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <style>
    p{
        padding: 15px;
        background: blue;
    }
</style>
 <script type="text/javascript" language="javascript">  
 
       $(document>
.ready(function(>
{ // Display alert message after hiding paragraphs $(".hide-btn">
.click(function(>
{ $("p">
.hide("slow", function(>
{ // Code to be executed alert("The hide effect is completed.">
; }>
; }>
; // Display alert message after showing paragraphs $(".show-btn">
.click(function(>
{ $("p">
.show("slow", function(>
{ // Code to be executed alert("The show effect is completed.">
; }>
; }>
; }>
; </script> </head> <body> <button type="button" class="hide-btn">Hide Paragraphs</button> <button type="button" class="show-btn">Show Paragraphs</button> <p>This is a techedHub paragraph.</p> </body> </html>
Try it here