Kelsey Kelsey - 4 months ago 14
Javascript Question

Simple jQuery Will Not Load

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

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.

Comments