jQuery slideToggle() doesn't work
Question
Hello my first time here,
I got a basic jQuery slideToggle and it doens't work. any solutions?
Thanks for reading this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ucp").click(function(){
$("#test").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="header">
<a href="http://www.kevinheisen.nl" target="_blank"><img src="style/lacp.png" alt="acp logo"></a>
<div class="nav">
<ul>
<li><a href="#">Afmelden</a></li>
<li><a href="http://www.kevinheisen.nl">Vraag hulp</a></li>
<li><a href="#">preview website</a></li>
<li><a href="#">ACP startpagina</a></li>
</ul>
</div>
</div>
<div id="ucp">Gebruikers beheer</div>
<div id="test">hallo hallo hallo hallo</div>
<div class="project">Projecten<br /><span id="menu">Klik hier om groter te maken</span></div>
<div class="updates">Updates<br /><span id="menu">Klik hier om groter te maken</span></div>
<div class="homecontent">Home content<br /><span id="menu">Klik hier om groter te maken</span></div>
<div class="portofolio">portfolio<br /><span id="menu">Klik hier om groter te maken</span></div>
<div class="about">Over mij<br /><span id="menu">Klik hier om groter te maken</span></div>
</body>
</html>
okay this all of my code. I know i can decrease the css.
@font-face {
font-family: 'Acptitle';
src:url('/admin/style/CGFLocustResistance.ttf'),
url('/admin/style/CGFLocustResistance.eot'); /* IE9 */
}
@font-face {
font-family: 'Acpdefault';
src:url('/admin/style/ccaps.ttf'),
url('/admin/style/ccaps.eot'); /* IE9 */
}
body {
margin: 0px 0px 0px 0px;
padding: 0;
background: #585858;
background-image: url('/style/lacp.png');
}
#menu {
font-size: 8px;
}
.header {
height: 180px;
min-width: 960px;
width: 100%;
background: #3A3A3A;
}
img {
display: block;
margin: 0 auto;
text-align: center;
}
.header > .nav > ul {
list-style-type: none;
}
.header > .nav > ul > li {
font-family: 'Acptitle';
text-align: center;
}
.header > .nav > ul > li > a:link, a:visited{
font-size: 12px;
box-shadow: inset 0 0 20px #000000;
margin: 0 10px;
float: right;
display: block;
background: #3A3A3A;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
height: 30px;
width: 150px;
padding: 15px;
color: black;
}
.header > .nav > ul > li > a:hover, a:active {
color: #000000;
background: #212121;
}
#ucp, #test{
font-family: 'Acptitle';
margin: 15px 0 0 5%;
width: 40%;
height: 45px;
float: left;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
#test{
display: none;
height: 300px;
width: 40%;
}
.project {
font-family: 'Acptitle';
margin: 15px 5% 0 0;
width: 40%;
height: 45px;
float: right;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
.updates {
font-family: 'Acptitle';
margin: 15px 5% 0 0;
width: 40%;
height: 45px;
float: right;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
.homecontent {
font-family: 'Acptitle';
margin: 15px 0 0 5%;
width: 40%;
height: 45px;
float: left;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
.portofolio {
font-family: 'Acptitle';
margin: 15px 0 0 5%;
width: 40%;
height: 45px;
float: left;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
.about {
font-family: 'Acptitle';
margin: 15px 5% 0 0;
width: 40%;
height: 45px;
float: right;
box-shadow: inset 0 0 20px #000000;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
padding: 10px;
text-align: center;
}
This everything. I have no problems on other site. i think my websitebrowser isn't the problem. i'm using Google chrome btw. i tried also in IE9 and firefox.
4 answers
solution1
1 2013-05-22 06:56:23
You have to hide the element that you want to toggle first.
So in your case you need to hide the test div.
CSS:
#test {
display:none;
}
It should now work.
Fiddle here
EDIT: On closer inspection, you shouldn't have to hide it. Check that the jquery library is referenced correctly as Jai has pointed out below.
solution2
0 2013-05-22 06:55:56
Sometimes it happens if you give a library src without any protocol like in your code:
<script type="text/javascript" scr="//ajax.googleapis.com/ajax/lib..."></script>
// ^-------Here
try once with by putting some protocol like https: or http:
<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
solution3
0 2013-05-22 06:56:21
Assuming there are no JavaScript errors, your code should work just fine. Here's a Fiddle that demonstrates it working. When you click on Gebruikers beheer the hallo hallo hallo hallo toggles in and out of view using a slide effect.
However, it's possible that the other scripts which you're referencing could be causing JavaScript errors, which would cause everything to break. One troubleshooting technique is to reduce the code so that you're only using that which is absolutely essential. Try the following:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#ucp").click(function () {
$("#test").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="ucp">Gebruikers beheer</div>
<div id="test">hallo hallo hallo hallo</div>
</body>
</html>
solution4
0 2013-05-22 06:57:48
Its working in fiddle...try here http://jsfiddle.net/CdWnx/
Could it be that you missed http part in jQuery reference?
<script type="text/javascript" scr="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
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.