Home/ Questions/Q 8400877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T21:39:40+00:00

I’m teaching myself Javascript (with Jquery) and I’m simply trying to do a show/hide

  • 0

I’m teaching myself Javascript (with Jquery) and I’m simply trying to do a show/hide on click function.

Now, I’m doing it with Sublime Text 2 and I’m trying to view it in browser by local host – I’m also doing this with HTML5 Boilerplate.

Below is my code.

To call Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Script

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

  </script>

HTML

<a href="#" id="paragraphAnchor">click me</a>
 <p>This is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a test</p>

I’m doing all of this within my HTML document. Not best practice but I thought I’d start small.

Now I do this, and the text isn’t even hidden.

Why is this?

UPDATE:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

  <script src="js/libs/modernizr-2.0.6.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function()
{
  $('p').hide();
  $(a#paragraphAnchor).click(function()
  {
    $('p').show();
  });
});

  </script>
</head>

<body>


 <a href="#" id="paragraphAnchor">click me</a>
 <p>This is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a testThis is  a test</p>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <!-- end scripts-->


  <script> // Change UA-XXXXX-X to be your site's ID
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->

</body>
</html>

UPDATE: ISSUE SOLVED

It appears HTML 5 Boilerplate should have called the JavaScript with

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>

instead of:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Or at least that’s how I got it working.

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jQuery URL is missing the protocol. This line:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    should read

    http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

    EDIT: This is because the file is being loaded locally, so the assumed protocol file isn’t going to be able to load any jquery libraries via HTTP(S).

    This can be confirmed by checking the Console. Chrome reports:

    Failed to load resource file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
    • 0