How to increase the height of the div?

Hi

I want to set the height of the div to 1000px. But I cannot.

index.html


<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Magic</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui-1.10.0/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="red">Home</div>
        <div id="blue">Projects</div>
        <div id="yellow">About Me</div>
        <div id="green">Contact</div>
    </body>
</html>

css/stylesheet.css


div {
    height: 50px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

js/script.js


$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).animate({
            height: '+=1000px'
        });
    });
    $('div').mouseleave(function() {
        $(this).animate({
            height: '-=1000px'
        });
    });
    $('div').click(function() {
        $(this).toggle(1000);
    });
});

Your code seems to work fine for me, so perhaps the paths to your scripts are faulty. Here is a better way to present your code samples (the code below is your own code, and it works fine):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

div {
    height: 50px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

</style>
	
</head>
<body>

<div id="red">Home</div>
<div id="blue">Projects</div>
<div id="yellow">About Me</div>
<div id="green">Contact</div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).animate({
            height: '+=1000px'
        });
    });
    $('div').mouseleave(function() {
        $(this).animate({
            height: '-=1000px'
        });
    });
    $('div').click(function() {
        $(this).toggle(1000);
    });
});

</script
</html>

In future, use the templates shown in this thread for posting code:

It’s work. I read. Thank you very much! It’s very useful!