c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
JQuery

How to implement show, hide using JQuery?

| | Html , JQuery

JQuery offers capability to hide and show, this can be implemented using hide() and show() methods.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>implementing hide and show using JQuery </title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#btnhide").click(function () {
               $("#divcontent").hide();
            });
            $("#btnShow").click(function () {
               $("#divcontent").show();
            });
        });
    </script>
</head>
<body>
    <div id="divcontent" style="border: 1px solid gray; width: 350px; height: 200px; background-color: #E91E63;">This is visible.</div>
    <input value="hide the content" type="button" id="btnhide" />
    <input value="show the content" type="button" id="btnShow" />
</body>
</html> 

Output: