Hide Image When Another Image Is Clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong? I want to click an image, and on that click, hide another image right next to

Solution 1:

You need to do do on page ready:

<script type="text/javascript"> 
$(document).ready(function() {
       $("#butShowMeSomeUnits").click(function() { 
            $('#arrowUnitspic').hide();
        });
});
</script>

Edit: The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?

If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:

if (typeof jQuery != 'undefined') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

In addition it might be helpful to see what errors your browser console /dev tools is showing.

Solution 2:

Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.

 $(document).ready(function(){
            $("#butShowMeSomeUnits").click(function() { 
                $('#arrowUnitspic').hide();
            });
    });

Solution 3:

You code looks good and works check here

What you might be missisng is either:

• to load jQuery script in the head of your page.
• to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.

Solution 4:

Steps that may help you:

1. make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
2. make sure your custom JS file or code is UNDER the including of jQuery lib.

3. very good starting point with jQuery is to put everything in $(document).ready() as below example:

   $(document).ready(function(){ $("img").click(function(){ $("img").hide(); $(this).show(); }); });