This is a short instruction on how to install Accordion on your Squarespace site. To start with you have to upload the following files and scripts:

  • jQuery
  • Accordion script
  • Accordion CSS file

You can download the .zip file with all the scirpts and files HERE.

 

Preparation

  • Go to your Squarespace storage and create a folder named scripts
  • Then Upload the .zip file into that folder (tick: Decompress Zip Files After Uploading)

 

Script

<link type="text/css" href="/storage/scripts/accordion/css/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/storage/scripts/accordion/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/storage/scripts/accordion/scripts/jquery-ui-1.8.14.custom.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
event: "mouseover"
});
});
</script>

 

HTML Code

<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
<ul>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
</div>
</div>

 

CSS Code

If you want to change the design and look of your Accordion widget, you will find the CSS file at:
/storage/scripts/accordion/css/jquery-ui-1.8.14.custom.css