Click here to Skip to main content
14,641,739 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hello, I want to show/hide toggle a div on my page when someone presses on a image. (this image will be some kind of button)

But somehow I cant get it to work...

<li class="menu"><img src="images/menu.png"></li>
<div id="menubalk"></div>


#menubalk {
position: absolute;
width: 200px;
height: 400px;
background: black;
z-index: 3;
margin-top: 73px;
}


$( ".menu" ).click(function() {
  $( "#menubalk" ).toggle( "slow", function() {
  });
});


I've uploaded my files, if you click the following link http://eduweb.hhs.nl/~11028416/html/[^]

you will see a black rectangle. This is the #menubalk. The 3 white stripes above the rectangle is .menu

I've also made a jsfiddle. Same as above only the 3 white stripes are not there but I guess thats not a problem right?

http://jsfiddle.net/Lg3wvqqu/[^]

Maybe this clarifies a bit

Does anybody knows why this is not working? That would be really great!

Thanks in advance,

Job
Posted
Updated 9-Oct-14 5:41am
v3
Rate this:
Please Sign up or sign in to vote.

Solution 1

You inner function (the second parameter of .toggle) body is empty, so it cannot possibly do anything :-)
$( ".menu" ).click(function() {
  $( "#menubalk" ).toggle( "slow", function() {
      // you do nothing here
      // how could you expect anything to happen?!
  });
});
—SA
   
v3
Comments
Member 11140766 9-Oct-14 11:29am
   
You mean .toggle( "slow", function() that part? I dont know what to put there, i saw some examples which are working this way
   
How can't you see it? — please see the clarified answer above.
—SA
Rate this:
Please Sign up or sign in to vote.

Solution 2

$( ".menu" ).click(function() {
  $( "#menubalk" ).toggle( "slow");
});

++++++++++ Part 2 ++++++++++++
We do not get the full picture of you code, only bits and pieces. Try this:
<!DOCTYPE html>
<html>
<head>
<style>
#menubalk {
position: absolute;
width: 200px;
height: 400px;
background: black;
z-index: 3;
margin-top: 73px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( ".menu" ).click(function() {
  $( "#menubalk" ).toggle( "slow", function() {
  });
});
});
</script>
</head>
<body>
<li class="menu"><img src="images/menu.png"></li>
<div id="menubalk"></div>
</body>
</html>
   
v2
Comments
Member 11140766 9-Oct-14 11:34am
   
Doesnt work :(
Peter Leow 9-Oct-14 11:43am
   
try the improved solution.
Member 11140766 9-Oct-14 11:49am
   
Thanks for the help! but unfortunatly still nothing, I've added the libary to my head section, the js script to my script code and html and css are still the same
Peter Leow 9-Oct-14 11:56am
   
My example does work, try it on http://jsfiddle.net/tkkrssj6/
I have no idea what you have on your side, but I have already given the working solution to your question.
Member 11140766 9-Oct-14 11:58am
   
Alright, I guess I have messed up my code somewhere then, I will keep on searching and hope I will find the problem. Thanks for the help
Member 11140766 9-Oct-14 12:39pm
   
Yup I did mess something up badly, I had a div which was over the button so that caused the fact I coulnt press the button. Thanks once again. Problem solved it is working now!
Peter Leow 9-Oct-14 12:43pm
   
You are welcome.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100