Hide and show function are used to show and hide any html element.
Here on button click we are showing and hiding the div.
1 2 3 4 5 | <div class="description"> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. </div> <input type="submit" value="Hide" id="hide" /> <input type="submit" value="Show" id="show" /> |
1 2 3 4 5 6 7 8 | $(document).ready(function () { $(document).on('click', '#hide', function (event) { $(".description").hide(); }); $(document).on('click', '#show', function (event) { $(".description").show(); }); }); |
Output
We can also provide how long this hide or show will take place be specifying the time
like
$(“.description”).hide(2000);
or $(“.description”).show(2000);
to perform specific task after hide or show we can use
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function () { $(document).on('click', '#hide', function (event) { $(".description").hide("slow", function () { alert("Hiding Completed."); }); }); $(document).on('click', '#show', function (event) { $(".description").show(100, function () { alert("Showing Completed."); }); }); }); |
Output