Step 1 - Adding to Code Inject
The first step is to add the necessary JQuery libraries to the code injection part of Squarespace, in the header portion. This can be done on a page-by-page basis but if you want to use JQuery throughout your site it is best added in your Site Settings-Code Injection-Header. This can be seen in the picture below...
Make certain to hit "Save Settings" to insure that the libraries have been added.
Step 2 - Add Your Content
Now that the libraries are referenceable you can then access them via the Code block found on any normal page. Make certain to have HTML selected and then reference the JQuery function you want. In this case I am using the Accordion.
This shows the basic latin defaults but you can see that the HTML code is pretty basic.
Step 3 - Review The Look
It always helps to review what you have done. So in this next part you can see that the basic content looks appropriate. What may not be obvious is that the Jquery will not be executing at this point. Only the contents are visible.
Why? Well because...
- 1) The content entry is not the final page
- 2) Squarespace 6 assembles the elements in the final view so each section is reasonably independent
- 3) Squarespace has set up rules for how the components work together so you have to follow the rules :)
Step 4 - The Final Output
Once all your content is done you can "View Page" to see the final results.