We can show and hide paragraph using hide() show() method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hide & Show paragraph using jquery</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <style type="text/css"> p{ padding: 25px; background: yellow; } </style> <script type="text/javascript"> $(document).ready(function(){ // To hide paragraph $(".btnHide").click(function(){ $("p").hide(); }); // To show paragraphs $(".btnShow").click(function(){ $("p").show(); }); }); </script> </head> <body> <button type="button" class="btnHide">Hide</button> <button type="button" class="btnShow">Show</button> <p>This is my paragraph.</p> <p>This is your paragraph.</p> </body> </html> |
$(“.btnHide”).click(function(){ This line of code will hide paragraph & .btnHide is class name of button . If you use id then your code would be like this $(#btnHide).click(function(){ becuase we use (#) this sign for id.
Now we will see another example just copy the code and run into browser
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of jQuery Animated Show Hide Effects</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <style type="text/css"> p{ padding: 25px; background:pink; font-size:25px; } </style> <script type="text/javascript"> $(document).ready(function(){ // Hiding paragraph $(".hide-btn").click(function(){ $("p.normal").hide(); $("p.fast").hide("fast"); $("p.slow").hide("slow"); $("p.vfast").hide(70); $("p.vslow").hide(3000); }); // Showing hidden Paragraph $(".show-btn").click(function(){ $("p.normal").show(); $("p.fast").show("fast"); $("p.slow").show("slow"); $("p.vfast").show(110); $("p.vslow").show(5000); }); }); </script> </head> <body> <button type="button" class="hide-btn">Hide</button> <button type="button" class="show-btn">Show</button> <p class="fast">This paragraph one</p> <p class="normal">This paragraph two </p> <p class="fast">This paragraph three</p> <p class="slow">This paragraph four</p> <p class="vslow">This paragraph five</p> </body> </html> |
Output of code
$(“p.normal”).show();
$(“p.fast”).show(“fast”);
$(“p.slow”).show(“slow”);
$(“p.vfast”).show(110);
$(“p.vslow”).show(5000);
});
110 and 5000 are timing in miliseconds so 5000 miliseconds means 5 seconds it means last paragraph will take 5 seconds to hide and 5 seconds to show .
See more tutorials