When Click Hide Button box hide and click Show button show box.

It is easy to learn - You will enjoy it.

Below the HTML Structure.

Follow the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Hide and Show Button</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sniglet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/pirala-style.css">
</head>
<body>

<div class="container">
    <div class="fun-cube"><i class="fa fa-product-hunt"></i></div>
     <h1>JQuery Hide and Show Button</h1>

    <div id="pirala">
        <div class="box-area">    
            <div class="box">
                <p>When Click Hide Button box hide and click Show button box show.</p>
                <p>It is easy to learn - You will enjoy it.</p>
            </div>
        </div>
        <button id="hide-button" class="btn">Hide </button>
        <button id="show-button" class="btn">Show</button>

    </div>
</div>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/pirala-js.js" type="text/javascript"></script>

</body>
</html>

 

 

Follow the jQuery:

(function( $ ){

$(document).ready(function(){
    $("#hide-button").click(function(){
        $(".box").hide();
    });
    $("#show-button").click(function(){
        $(".box").show();
    });
});


})( jQuery );

 

Live View             Download File