Search code examples
jqueryshow-hidetogglebutton

Show/Hide <div> clicking on an img

i have an image and i'd like to show or hide a div clicking on that image. When the page is load, the div should be hidden

I used this script:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("img.menubutton").click(function(){
    $("div.form").toggleClass("hide");
  });
});
</script>
</head>

<body>
<img class="menubutton" src="img/menuicon.png">
<div class="form">
    ....
</div>
</body>

It works (but the clicking-area is only the top-part of image... not all the image)... but if i enter a related rule in css:

img.menubutton {
position: fixed;
top: 5px;
left: 10px;
}

it doesn't work anymore.

Is there a way to:

  • Use all the image-area for clicking
  • Positioning the img where i want with css, withoud lose the script effect?

Thank you!

Solution

  • Your ul element covers your image. You can try to add z-index to your image.

    img.menubutton {
    z-index: 999;
}