I'm having trouble getting my jQuery to work. The .js file is in the same folder as the homepage, and I'm trying to accordion a list using the effects plugin.
Here's the jQuery code:
$(document).ready(function(){
$('#accordion').accordion({collapsible:true, active: false})
});
Here's the homePage code:
<!DOCTYPE html>
<html>
<head>
<title>Santa's Workshop</title>
<script type="text/javascript" src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="styleSheet.css"/>
</head>
<body>
<div id="header">
<img src="images/northpole.png">
</div>
<div class="left">
<h4>Activity Pages</h4>
<ul id="accordion">
<li>Santa's Stables</li>
<li>Gift Delivery</li>
</ul>
</div>
</body>
</html>
and finally the CSS:
body{
background-color:green
}
#header{
margin:auto;
float:center;
width:500px;
border-radius:10px;
background-color:red
}
#header img {
display:block;
margin:auto
}
.left{
margin:auto;
float:left;
height:500px;
width:30%;
border-radius:10px;
background-color:blue;
border: 1px solid black;
font-family:Cursive;
}
.left h4 {
margin:auto;
text-align:center;
border-bottom:1px solid black;
background-color:#55FFFF;
position:relative;
top:+10px
}
Why am I having this trouble?
