In this article we will show you the solution of show hide jQuery, with the help of the cross-platform, portable, and lightweight jQuery Javascript library, you may enhance the aesthetics and interactivity of your online applications.
"Write less, accomplish more" was the main philosophy driving the creation of jQuery.
With jQuery, there are lots of possibilities to investigate.
The fact that jQuery is so simple to use and has a variety of effects makes it stand out from other scripting languages. Now move to the concept of show hide in jquery.
Step By Step Guide On Show Hide jQuery :-
The hide() and show() methods in jquery allow you to reveal and conceal HTML components, respectively.
hide() method - By simply setting the inline style display: none for the selected elements, the hide() method conceals the HTML element that has been selected.
show() method - By returning the display attributes to their original style before the inline style display: none was added to them, the
show() method shows the chosen element.
Syntax:
$(selector).show(); $(selector).show(speed,callback); $(selector).hide(); $(selector).hide(speed,callback);
speed: Using the values "slow," "rapid," or "milliseconds," the speed parameter, which is optional, indicates how quickly an object will show up and disappear.
callback: This time, it's an optional parameter that designates the procedure to be carried out following the completion of the hidden() or show() methods.
1.speed as a parameter
It is entirely up to you whether or not to use the speed parameter because it is optional and will provide your web application's animation a richer, more immersive experience.
The following values for the speed parameter are possible:
- slow
- fast
- milliseconds.
Higher values for milliseconds denote animation effects that are more slowly animated.
Duration is 200 milliseconds when referring to "fast" speed.
Duration is the term used to describe "slow" speed.
2.callback function usage
Only when hidden() and display() have finished running in full do callback functions start running.
Despite the fact that JavaScript lines are performed line-by-line, it is possible that the following line of code will be executed before the previous one because of the time-consuming effects of jQuery.
It could result in mistakes. Such mistakes can be avoided with the aid of callback functions. The effect method received it as the final argument.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="utf-8" />
<title>JQuery Show and Hide Effects</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> .button { background-color: grey; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 2px 3px; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("#show").click(function() {
$("h2").show();
});
$("#hide").click(function() {
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>Welcome to Talkerscode...</h2>
<button class ="button" id="hide">Hide</button>
<button class="button" id="show">Show</button>
</body>
</html>
- Our code begins with HTML and HEAD tags.
- Next, we employ a meta tag.
- Next, we give our page a title.
- After that, a script is used to import the jQuery library.
- Next, we add some flair to our page to make it interactive.
- Finally, we end our style.
- Following that, we launch our script and utilise the ready() function to run the jQuery code.
- Next, we utilise the display function to reveal concealed content.
- The visible text is then hidden using the hide method.
- Finally, we end the script and head section.
- Following that, we begin our body, which includes some text.
- Next, we add 2 buttons with the values "show" and "hide," respectively.
- BODY & HTML tags are used to wrap up our programme.
Conclusion :-
Thus, we have successfully acquired knowledge of the jQuery show and hide idea.
We also learned how to utilise the jQuery hidden() and show() functions to conceal and reveal a page element after your website fires a click event.
jQuery effects may offer a variety of incredible animations in a very straightforward and easy approach. With its extensive capabilities, it can improve one's web experience.
With jQuery, you can add a tonne more of these kinds of effects to your online application to boost its allure and appeal.
I hope this article on show hide jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
