How To Change Div Size On Click Of Button Using JQuery

admin_img Posted By Bajarangi soft , Posted On 22-10-2020

In JQuery we can change the div size for different size on click of button using jquery ,So today we discuss how to do it in this article

How To Change Div Size On Click Of Button Using JQuery

Step 1: Create Index.php file and implement below html code:
 

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />

<button class="btn btn-info" id="changeSize">Change Size</button>

Step 2:Implement below jquery to change div size on click of button :
 
<script type="text/javascript">
    // Stockphotos JS

    $(document).ready(function(){
        var flag = 0;
        $("button#changeSize").click(function(){
            if(flag == 0) {
                $("#dummyimage").attr("src","http://dummyimage.com/250x155/");
                flag = 1;
            }
            else if(flag == 1) {
                $("#dummyimage").attr("src","http://dummyimage.com/450x255/");
                flag = 0;
            }
        });
    });
</script>

Complete Code For Changing Div Size On Click Of Button Using JQuery
<html>
<head>

    <title>How To Change Div Size On Click Of Button Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Change Div Size On Click Of Button Using JQuery</h1>
    </div>
    <br>
    <div class="col-md-12">
        <div class="well">
            <img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />

            <button class="btn btn-info" id="changeSize">Change Size</button>
        </div>
    </div>
    <br>
</div>

</body>
</html>
<script type="text/javascript">
    // Stockphotos JS

    $(document).ready(function(){
        var flag = 0;
        $("button#changeSize").click(function(){
            if(flag == 0) {
                $("#dummyimage").attr("src","http://dummyimage.com/250x155/");
                flag = 1;
            }
            else if(flag == 1) {
                $("#dummyimage").attr("src","http://dummyimage.com/450x255/");
                flag = 0;
            }
        });
    });
</script>

Related Post