Interactivity is the middle name of jQuery. You can hide or show elements that you want. It is done with jQuery Hide and Show functions. Let’s understand how to do this simple but impressive tweak in web pages.
jQuery Hide Function
The hide function is called with an HTML element used in a web page.
$(element).show([duration],[ function])
Read the details from official site of jQuery
jQuery Show Function
The show function is also called with an HTML element used in a web page.
$(element).show([duration],[ function])
Read the details from official site of jQuery
In both of these the duration and function arguments are defined for these values
- duration is given in number or string defining how slow or fast animation will be executed while showing the element. By default it is 400 milliseconds. You can give “slow”, “fast” or duration in milliseconds
- function is the optional. It defines the activity to do after the show function completes. This function can be used to change the appearance of an element, its color, or fill some value in some form element. You can define the function to raise an alert or send message to visitor.
How to use iQuery Hide and Show functions?
The show and hide functions can be used in a jQuery script in response to some action done by the user. The action can be to click an element, click a button, select a value or change text in an input field.
The function is called with an element identified by $(ID/ Type/Name)
When to use jQuery Hide and Show functions?
- Display an HTML element in response to an event.
- Create smaller web page in which hidden values are displayed when user needs to see them.
- Add animation of elements.
Example
In the following example a question is displayed with four options to select one as answer. At the end of the options a “Show button” is displayed. When “Show Button” is clicked it shows correct answer and it changed to “Hide Button”. When “Hide Button” is clicked the answer is hidden back and the button changes to “Show Button”
Without duration and function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Showbtn").click(function(){
$("#para").show();
$("#Hidebtn").show();
$("#Showbtn").hide();
});
$("#Hidebtn").click(function(){
$("#para").hide();
$("#Hidebtn").hide();
$("#Showbtn").show();
});
});
</script>
</head>
<body style="font-family:arial">
<div style="width:40%; align:center; background-color:lightyellow;padding:20px;border:1px solid #dedede">
<H1 align="center"> A Small Quiz</H1>
<h4 >What is true among follwoing</h3>
<h5><input type="radio">C is Object Oriented Programming Language</input></h5>
<h5><input type="radio">C is Procedural Language</input></h5>
<h5><input type="radio">C is Low Level Language</input></h5>
<h5><input type="radio">C is DML statement</input></h5>
<input type="button" id="Showbtn" value ="Show Answer"><input type="button" id="Hidebtn" hidden value="Hide Answer">
<p id="para" hidden>C is Procedural Language</p>
</div>
</body>
</html>With duration but without function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Showbtn").click(function(){
$("#para").show("slow");
$("#Hidebtn").show("slow");
$("#Showbtn").hide("slow");
});
$("#Hidebtn").click(function(){
$("#para").hide("slow");
$("#Hidebtn").hide("slow");
$("#Showbtn").show("slow");
});
});
</script>
</head>
<body style="font-family:arial">
<div style="width:40%; align:center; background-color:lightyellow;padding:20px;border:1px solid #dedede">
<H1 align="center"> A Small Quiz</H1>
<h4 >What is true among follwoing</h3>
<h5><input type="radio">C is Object Oriented Programming Language</input></h5>
<h5><input type="radio">C is Procedural Language</input></h5>
<h5><input type="radio">C is Low Level Language</input></h5>
<h5><input type="radio">C is DML statement</input></h5>
<input type="button" id="Showbtn" value ="Show Answer"><input type="button" id="Hidebtn" hidden value="Hide Answer">
<p id="para" hidden>C is Procedural Language</p>
</div>
</body>
</html>With duration and function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Showbtn").click(function(){
$("#para").show("slow",function(){alert("displayed answer");});
$("#Hidebtn").show("slow");
$("#Showbtn").hide("slow");
});
$("#Hidebtn").click(function(){
$("#para").hide("slow");
$("#Hidebtn").hide("slow",function(){alert("Hidden answer");});
$("#Showbtn").show("slow");
});
});
</script>
</head>
<body style="font-family:arial">
<div style="width:40%; align:center; background-color:lightyellow;padding:20px;border:1px solid #dedede">
<H1 align="center"> A Small Quiz</H1>
<h4 >What is true among follwoing</h3>
<h5><input type="radio">C is Object Oriented Programming Language</input></h5>
<h5><input type="radio">C is Procedural Language</input></h5>
<h5><input type="radio">C is Low Level Language</input></h5>
<h5><input type="radio">C is DML statement</input></h5>
<input type="button" id="Showbtn" value ="Show Answer"><input type="button" id="Hidebtn" hidden value="Hide Answer">
<p id="para" hidden>C is Procedural Language</p>
</div>
</body>
</html>
Be First to Comment