Library - JQuery

Back to Course

Lesson Description

Lession - #559 JQuery HideShow

The hide(>
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(>
shows the hidden, selected elements.

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


 <title> jQuery Example</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
        padding: 15px;
        background: blue;
 <script type="text/javascript" language="javascript">  
{ // Display alert message after hiding paragraphs $(".hide-btn">
{ $("p">
.hide("slow", function(>
{ // Code to be executed alert("The hide effect is completed.">
; }>
; }>
; // Display alert message after showing paragraphs $(".show-btn">
{ $("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