Simple jQuery Will Not Load

Question

I'm trying to re-learn HTML/CSS/JavaScript and coming across an issue with a site I'm building. I'm on Squarespace and trying to implement jQuery. I have simple code and it will not work. Please let me know what I am doing wrong.

This is in my "Page Header Code Injection"

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

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

And this is in my actual page:

<div id="accordion">

<h3>Section 1</h3>
  <div>
    <p>
      Blah
    </p>
  </div>
  <h3>Secion 2</h3>
  <div>
    <p> lalala
    </p>
   </div>
</div>

Do I need to declare "text/javascript"? I've tried adding "https", declaring it HTML5, etc...

Please help! I've searched around.

Thank you.

Answer 1

I'm assuming you want to actually use the accordion widget from jQuery UI? In that case you need to actually run some code to tell jQuery that you want to do that.

After your tags importing the two scripts, add this:

<script>
 $(function() {
     $( "#accordion" ).accordion();
 });
</script>

This tells jQuery to find the tag with the id accordion and run the function .accordion() on it, which in jQuery UI turns it into the accordion widget.

Also note, the protocol less URLs is designed so you can switch between http: and https without having to change your code. Unfortunately, it won't work if you are running your page from the file system (file:) because it will then try to load the scripts from your local hard drive. Explicitly add http: at the beginning of the URL if you are running locally.

Answer 2

In order to use the jQuery UI accordion, you need to set it up:

 <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
 </script>

Also, make sure your HTML markup matches what is expected by the accordion plugin:

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>Lorem</p>
    </div>
        <h3>Section 2</h3>
    <div>
        <p>Ipsum</p>
    </div>
</div>

Lastly, make sure you're also including the CSS for jQuery UI:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

See this link: http://jqueryui.com/accordion/

Answer 3

If you are using from local, then it would look for file:// which doesn't exists. Use this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>$(function() {$( "#accordion" ).accordion();});</script> <!-- To call accordion-->

Edit: Using //, have a look at error in js console:

Answer 4

To use the accordion UI widget, you need to instantiate it like this:

  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>

after the external sources are loaded.

This is found in the documentation: http://jqueryui.com/accordion/

Click "View Source" link.