I have a simple jquery code for a slide down panel on my website. I have included the jquery.js file in the header. But it still doesn't work. Has it something to do with the version?
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slide Panel</title>
<script type="text/javascript" src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Panel</p>
</div>
<p class="slide">
<div class="pull-me">
Slide Up/Down
</div>
</p>
</body>
</html>
The CSS:
body {
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
.pull-me{
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #ffffbd;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond,times-new-roman,serif;
}
.panel p{
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #cc0000;
}
.pull-me {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#cc0000;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
And the jQuery:
$(document).ready(function(){
$('.pull-me').click(function(){
$('.panel').slideToggle('slow');
});
});
Thanks in advance! :)
<!DOCTYPE html>
<html>
<head>
<title>Slide Panel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <!-- Always first call the jQuery library -->
<script src="script.js"></script> <!-- Then call your custom scripts -->
<link rel="stylesheet" href="style.css"> <!-- Link tag is selfclosing don't put </link> at the end -->
</head>
<body>
<div class="panel">
<br />
<br />
<p>Panel</p>
</div>
<p class="slide">
<div class="pull-me">
Slide Up/Down
</div>
</p>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.