Collapse div

by Manoj Singh

HTML

<input type="button" value="click me" id="toggle">
<div class="container">
    <div class="box">
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
    </div>
    <div class="">
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
    </div>
</div>

CSS

.container{
        height: 100vh;
        width: 100px;
        border:2px solid red;
    }
    .box{
        background-color: orange;
        border: 2px solid green;
    }

JavaScript

<script type="text/javascript" src="home/site-js/minified/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function () {
        console.log(1);
        $('#toggle').on('click',function () {
            $('.box').animate({
                'height': "toggle",
                'width':"toggle"
            },400);
        });
    });
</script>