Hide and Show is a very common functionality in a web application before jQuery invent users will hide and show elements or content using JavaScript code but after jQuery released hide, show and toggle element work will become easy. You can hide and show elements in single-line code using jQuery.
This tutorial help to hide, show and toggle HTML element using jQuery. I will demonstrate different way to hide and show element by using Hover,focus,hide()/show() and toggle() method with demos.
Hide and show element Using hide() and show() jquery method
hide and show is a very magical function in jquery to show and hide HTML elements. Let’s demonstrate hide and show jquery functionality.
Also Checkout other useful jQuery tutorials,
- Simple Example of Pagination Using jQuery and Bootstrap
- Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
- Simple Example of Hide, Show and Toggle Element Using jQuery
- Dynamically Add and Remove rows in a Table Using jquery
I will create HTML UI to show and hide element,
<div class="panel panel-default col-sm-6" style="text-align: center;"> <div class="panel-heading">Hide And Show Button</div> <div class="panel-body"> </div> <h2 id="hide1">welcome to all</h2> <div style="padding-bottom: 2%;" align="center"><button id="btn1" class="btn btn-primary" type="button">Click To Hide</button> <button id="btn2" class="btn btn-primary hide" type="button">Click To Show</button></div> </div>
Here I have bootstrap panel to display a hide and show element.I used panel for only UI enhancement nothing else hidden motive have for this hide and show functionality. I have created a div which is containing 'Welcome to all' text and element id of this element is 'hide1'.I have create two button ones for hide(id is '#btn1') and other for show(id is '#btn2') , default content will show and hide button will visible and after hide button clicked the content will hide and show button will visible.
You can improvise this code but this is for beginner jquery lover who is learning jquery uses.I will write some jQuery code that will work on hide and show button.
$(document).ready(function(){
$("#btn1").click(function(){
$("#hide1").hide();
$("#btn2").removeClass("hide").addClass("show");
$("#btn1").removeClass("show").addClass("hide");
});
$("#btn2").click(function(){
$("#hide1").show();
$("#btn1").removeClass("hide").addClass("show");
$ ("#btn2").removeClass("show").addClass("hide");
});
});
I have used jQuery $(document).ready function which use to tell jQuery to wait until the DOM (Document Object Model) is fully loaded or when our page is fully rendered. If the “hide1, btn1, btn2” element has not yet loaded and this jquery code executes then click will not attach with buttons and will not fire button click event, So always use jQuery/javascript code in the footer of the page.
Hide and Show Element Using jQuery Toggle
toggle is very important method if you want toggling element visibility property using hide() and show(), element is hide then we show element or if element is showing then we will hide element. The revert of current element display property.
<div class="panel panel-default col-sm-6" style="text-align: center;"> <div class="panel-heading">Toggel Data</div> <div class="panel-body"> <h2 id="hide4">welcome to all</h2> <button id="btn3" class="btn btn-primary" type="button">Click To Toggle</button></div> </div>
I have created a div which is containing 'welcome to all' text and id of this element is '#hide4'.I used a button(id is #btn3) to toggle element display property.
We will use jQuery toggle() method to show and hide content.I will bind click event with button "#btn3" and fire jQuery toggle method.
$("#btn3").click(function(){
$("#hide4").toggle('slow');
});
I am using the jQuery .toggle() function to display the div. The argument slow used in the .toggle() function will animate the slow display. You can leave it blank as well but div will hide/show without animation.
Hide and Show Element Using jQuery Hover
hover is an element event which will use to do some task on mouseenter and mouseleave event of the element. You can do the same thing using CSS as well but This tutorial belongs to the jQuery category so I will let you know how to catch hover events using jQuery.
hover() method work on only mouse pointer enters and leaves the elements. The .hover() method binds handlers for both mouseenter and mouseleave events.
I will create HTML UI to show a div content.I will hide and show div based on mouse hover using jQuery Hover event.
<div class="panel panel-default col-sm-6" style="text-align: center;"> <div class="panel-heading">Hover To Toggel</div> <div class="panel-body"> <h2 id="hover-content">Hover Element</h2> <div id="hover-ele"> <h3>Hover here to hide</h3> </div> </div> </div>
I am using the same HTML content except change some element ids, as you can see i used a div with text (Hover Element). I am hiding div(#hover-content) on hover of div(#hover-ele) element, default content div will display and hide on mouse hover of div((#hover-ele). I am using toggle jQuery method to hide and show content div.
I am using below jQuery snippet to hide and show elements using the hover event.
$("#hover-ele").hover(function(){
$("#hover-content").toggle('slow');
});
I attached a hover event on “#hover-ele” div and hiding or showing elements using jQuery toggle method.
Hide and Show Element Using jQuery focus
focus event is use on some input HTML element that notify the HTML input gains focus .you can also handle focus event using CSS. I am using focus jQuery event to hide and show element. You can use show help information whenever user focus element and hide information if not user focus element.
I will create the below HTML layout that will contain an HTML input and a div which is containing some information.This information will display on the focus of HTML input.
<div class="panel panel-default col-sm-6" style="text-align: center;"> <div class="panel-heading">Focus In Input Box</div> <div class="panel-body"> <h2 id="focus-information">Enter Element Here</h2> <div><input id="focus" type="text"></div> </div> </div>
I will write some jQuery code to handle focus event.
$("#focus").focus(function(){
$("#focus-information").toggle('slow');
});
as you can see, I have attached focus event with #focus HTML input.We are toggling input help information on focus of HTML input textbox.
You can download the source code and Demo from the below link.
