Animate with jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content-before {
            color: white;
            background-color: darkblue;
            display: inline-block;
        }

        .content-after {
            display: none;
            font-size: 14px;
            font-family: arial;
            color: #fff;
            text-align: left;
            Line-height: 16px;
            opacity: 0;
        }

        .content-box {
            width: 240px;
            height: 60px;
            border-radius: 6px;
            background-color: blue;
            padding: 20px;
        }
    </style>
</head>

<body>
<div class="content-box">
    <p class="content-before">Click me to see more</p>
    <p class="content-after"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Suspendisse interdum consectetur libero id. Turpis massa sed elementum tempus.
        Cursus eget nunc scelerisque viverra mauris in. Pharetra pharetra massa massa ultricies mi quis. Luctus accumsan
        tortor posuere ac ut consequat semper viverra nam. </p>
</div>

<script>
    $(document).ready(function () {
        $(".content-box").click(function () {
            $(".content-box").animate({
                width: '500px',
                height:'+=200px' //na default dodadi uste 200px
            },1000 );
        })
        $(".content-after").show().animate({
           opacity:"1"
        },3000);
    })
</script>
</body>

</html>