Samz3n
06-29-2012, 09:35 AM
Hello there..
I am trying to make a simple jquery Show/Hide Panel, but it doesn't seem to work..
Here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Velkommen</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
/*this is what we want the div to look like*/
div.topleft{
display:block;
/*set the div in the top left corner*/
position:absolute;
top:0;
left:0;
width:810px;
/*give it some background and border*/
background:#fff;
border:0px;
}
div.panel,p.flip{
margin:0px;
padding:5px;
width:400px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel{
height:120px;
width:400px;
display:none;
}
</style>
</head>
<body>
<div class="topleft">
<p class="flip">Show/Hide Panel</p>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
</div>
</body>
</html>
On ftp: http://facesitemedia.dk/test.html
The tutorial i used:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
Do i need to upload some sort of jquery library on the ftp server?
I am trying to make a simple jquery Show/Hide Panel, but it doesn't seem to work..
Here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Velkommen</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
/*this is what we want the div to look like*/
div.topleft{
display:block;
/*set the div in the top left corner*/
position:absolute;
top:0;
left:0;
width:810px;
/*give it some background and border*/
background:#fff;
border:0px;
}
div.panel,p.flip{
margin:0px;
padding:5px;
width:400px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel{
height:120px;
width:400px;
display:none;
}
</style>
</head>
<body>
<div class="topleft">
<p class="flip">Show/Hide Panel</p>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
</div>
</body>
</html>
On ftp: http://facesitemedia.dk/test.html
The tutorial i used:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
Do i need to upload some sort of jquery library on the ftp server?