CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Benjamin Dunphy
Benjamin Dunphy

Reputation: 879

Show hidden image with jQuery

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

  1. Hide an image with styles.css

    img {
display: none;
 }

  2. Show the image with scripts.js

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

  3. 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?!

Upvotes: 1

Views: 4511

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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/

Upvotes: 1

Walter Stabosz
Walter Stabosz

Reputation: 7735

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()

Upvotes: 1

Related Questions