...

View Full Version : Simple jquery Show/Hide Panel wont work



Samz3n
06-29-2012, 10: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?

chrisranjana
06-29-2012, 11:50 AM
<script type="text/javascript" src="jquery.js"></script>



or you can use


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum