I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
@charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
with
and I think you should be fine