Show hidden image with jQuery

Question

FYI: I am learning how to code with an online tutorial. In this tutorial, we are learning javascript and jQuery. The point is to:

Hide an image with styles.css
```
img {
display: none;
 }
```

Show the image with scripts.js

$(function() {
$("p").click(function() {
$("img").show();
});
});

The html is as follows:

<!DOCTYPE html>
<html>
<head>
 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
 <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
 <script src="js/jquery-1.9.1.js"></script>
 <script src="js/scripts.js"></script>
 <title>Peek-a-boo</title>
</head>
<body>
<div class="container">
  <h1>Peek-a-boo</h1>

  <p>Let's play peek-a-boo. Click here to see the surprise!</p>

  <img src="img/walrus.jpg">
</div>
</body>
</html>

WHAT WORKS:

The html page looked fine. The bootstrap css works. The image showed up fine. The css script hid the image just fine.

WHAT DOES NOT WORK:

The jQuery is not showing the image when I click the paragraph.

I have gone so far as to copy and paste the tutorial into sublime text 2, but it is still not working. I am 99% positive that everything is in the right folder.

enter image description here

Any ideas as to what could be the problem?!

No errors in your code here. Any messages in console? Can you reproduce this in JSFiddle? — Tigran Petrossian
– Tigran Petrossian, Commented Nov 17, 2013 at 15:00
Are you sure the image URL is actually working? Remove display: none and see if it shows. — Michelle
– Michelle, Commented Nov 17, 2013 at 15:11
Hi Michelle, the image initially shows up fine. The styles.css hides it, but the scripts.js is not making it visible again. — Benjamin Dunphy
– Benjamin Dunphy, Commented Nov 17, 2013 at 15:16
What browser are you using? Chrome has very nice developer tools. Press F12 to open them. Then go to the console tab and type $("img").show(); and hit enter to run the code. That should display the image if jQuery is loaded correctly. If not, you should get a nice error message to help you debug further. — Walter Stabosz
– Walter Stabosz, Commented Nov 17, 2013 at 15:24

Community · Accepted Answer · 2017-05-23 10:25:38Z

1

Your code is perfect. The only issue that was found/caught by the jsfiddle was the broken img tag.

Tip! If you can't get the image to load, then you can still view the error that was caught by the console. That will help you know where the error was. It will tell you whether image was not found or the js was not loaded or any other error. So go to the console and see for any messages.

If you are sure that the error is in the code, then try to write it in a fiddle and provide it. Let us edit it! :)

To test the jQuery code run this:

$(document).ready(function () {
  $('body').css({
    'font-size': '2em'
  })
})

This will englargen the text to 2em. This is just a test so that to know that your code is working or not :) If nothing happens, then check your jQuery link.

Link the jQuery correctly as this was the only problem in your code. Try to test it in the network tab too! There you will find what type of directory is being used in the code.

Pointed out by Michelle, you need to link your js as

<script src="js/jquery-1.10.2.js"></script>

Why? Because you need to write the exact name for the files to be linked, otherwise you'll get a 404 error; not found. So you need to write the code as above.

Didn't you notice a 404 in the console? Just include the above code and remove the previous, and you'll get the code working.

http://jsfiddle.net/afzaal_ahmad_zeeshan/RBL2X/1/

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Nov 17, 2013 at 15:05

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Benjamin Dunphy Over a year ago

Thanks Afzaal, but this did not fix the problem.

Afzaal Ahmad Zeeshan Over a year ago

Ok, then make sure the files are linked perfectly. Since your code is just perfect :) Don't worry about it, its working..

Walter Stabosz Over a year ago

I would think that most browsers will automatically close an img tag during DOM processing.

Benjamin Dunphy Over a year ago

That's what I thought the problem was. Here's the image of my file structure i.imgur.com/HCacnJ9.png

Michelle Over a year ago

@BenjaminDunphy you made a small typo! You're using jQuery 1.9.1 in the HTML file, but in your local files you have version 1.10.2

|

Walter Stabosz · Accepted Answer · 2013-11-17 15:07:30Z

1

I don't see an attached screenshot of your folder structure, so I can't confirm, but my only guess is that image path is wrong. Confirm that you can get the image to show by removing the css that hides it. You can even confirm that jQuery is working by changing .show() to .hide(), or .toggle()

answered Nov 17, 2013 at 15:07

Walter Stabosz

7,7955 gold badges48 silver badges79 bronze badges

3 Comments

Benjamin Dunphy Over a year ago

Thanks for the reply, Walter. I do not have enough reputation points to add an image. Since the image shows up correctly, and was hidden by scripts.css, the image path is not the problem. You can find the image of the file folders here i.imgur.com/HCacnJ9.png

Afzaal Ahmad Zeeshan Over a year ago

Adding an image means to just Press CTRL + G a popup will come out..Ok send the image to me, I will include it :) Don't worry..send me the link on my answer..

Walter Stabosz Over a year ago

Can you provide a screenshot of the img folder?

Collectives™ on Stack Overflow

Show hidden image with jQuery

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related