In this article we will show you the solution of jQuery toggle show hide, in order to toggle between hide() and show(), the toggle() method is called on the selected elements. The visibility of the selected elements is checked using this method.
An element that is hidden is shown with show(). The hide() method is called if an element is visible - The effect is created by enabling and disabling the element.
By using the toggle method of jQuery, specified visible elements can be hidden and hidden elements can be displayed.
In your web pages, use the toggle method to allow users to switch between showing and hiding elements, like divs, menus, paragraphs, etc.
The $.hide and $.show methods should be used if only one target is required, such as hiding or showing a visible element.
Step By Step Guide On jQuery Toggle Show Hide :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show').click(function() {
$('.menu').toggle("slide");
});
});
</script>
</head>
<body>
<div id="show">Click to Show/ Hide div</div>
<div class="menu" style="display: none;">
<ol>
<li>India</li>
<li>USA</li>
<li>Chicago</li>
<li>Paris</li>
</ol>
</div>
</body>
</html>
- To begin, we need to write <HTML>, which tells the browser what version of HTML we're using. In an HTML document, the first element is a tag.
- You should use the <head> tag to describe the project's heading. A difference between the title and the final brackets is that the title is open, whereas the final brackets are closed. A step-by-step style sheet is an external style sheet that displays on a website based on the URL or path of the page.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Slide showing and toggle functions were added to the script.
- The head is closed once the script is finished.
- In this case, the body tag describes the body of the website. This is where the website's content is written.
- After that we add a clicking function for show and hide toggle.
- Then we create a listing for a menu.
- After that we close </div></body></html>
Conclusion :-
The duration is used to transform a toggle technique into an animation method. Use strings like "quick" or "slow" to provide a duration parameter as milliseconds.
The animation will move more slowly the higher the millisecond value.
When a value is provided as fast, it means 200 milliseconds, and if it is provided as slow, it means 600 milliseconds.
I hope this article on jQuery toggle show hide helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
