This is a companion piece to my earlier post SquareSpace and the “No Code” Website That Wasn’t.  They’re great for launching a sweet looking page fast, but if you want to go beyond the basic template you can run into a wall pretty quickly too.  Even things that seem straightforward, like changing the link colors in your footer, may be nearly impossible to achieve without dabbling in some CSS or Javascript, and figuring out where it should go!

One of the things I’ve seen often is a site owner wants to add drop-down or accordion style sections, for an FAQ page or the like. These are a rare graphical fillip that not only looks cool, but can really help page flow and readability for visitors. Unfortunately, SquareSpace and other “no code” sites don’t offer an easy way to put those in – but trust me, there IS a way! You can’t do it without some Javascript, a little CSS and HTML, but don’t let that scare you; as you’ll see the coding isn’t that onerous to create and implement (once you know the trick).

Here’s the tl;dr version of what we’re going to do:

Use SquareSpace’s code injection feature to add JQuery, throw in a dash of custom CSS to make it pretty, and then call the accordion function with HTML hard coded into your page content.

If that hasn’t scared you off yet (and it shouldn’t), keep reading to see exactly how – and how easily – it all works.

Javascript Injection

The first thing you need to do is add some code for an “accordion” effect that is available to all your pages.  SquareSpace has a great walk-through on using code injection that I’d recommend you review as well, but I’ll take you through it here.

Log in to your site, and navigate to Settings / Website / Advanced.  We’ll be putting two things here: some calls to public JQuery libraries for support of our accordion, and the accordion function itself so that it can be called from anywhere on the site.  You’ll notice several choices for where to inject code; best practice recommends injecting these scripts into the footer as it theoretically allows your site to render more quickly for visitors by showing content prior to loading the script libraries, but as with most thing here YMMV.

Whichever you choose, pulling the JQuery libraries is done exactly the same as you would in any HTML page; decide which you want to use and include within <script> tags, like so:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

You could also link to an external CSS theme, roll your own in another section, or a little of both.  I’m partial to the open JQuery peppergrinder them myself, and you can find that and a dozen more at JQueryUI’s themeroller page.  Best practice recommends putting this above the script tags, and this is what I use:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/peppergrinder/jquery-ui.css">

The only thing left is to add the actual accordion script function, and make any adjustments needed to match your page. Here’s the full block of code, including the scripts and everything described above:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/peppergrinder/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(function() {
     $( ".accordion" ).accordion({ 
        heightStyle: "content" } );
     $( ".accordion" ).accordion({ 
        header: "h3", 
        collapsible: true, 
        active: false, 
        heightStyle: "content" });
   });
</script>

This handles all of the accordion settings, including making the accordion headers heading 3 style (you can change that in custom CSS if you want), forcing the height to match the amount of content rather than with scrollbars, and so on.  You can go deeper into the configuration at the  JQueryUI accordion widget API page.

Putting the Code in that “No Code” Site

That’s right, we’re going to break your SquareSpace, “no code” website by actually adding HTML, and do things you couldn’t accomplish any other way!

It turns out that SquareSpace has made it quite easy to add HTML, markup, or other code to your site – it’s even offered as one of the options when you create a new block.  Simply go to the page you want to add the accordion, insert a new block and choose the “</> Code” icon. Confused? Check out this helpful SquareSpace page.   From there just bury your content between <h3> and <div> tags like so:

<div class="accordion">
 <h3>Accordion Header 1 </h3>
 <div>
 <p>This is my accordion content - you'll only see this if you opened up Header 1! </p>
 </div>
 <h3>Accordion Header 2 </h3>
 <div>
 <p>This is some more accordion content - and if you open me, Header 1 will close! </p>
</div>

As an aside, the accordion function really isn’t too picky … you can use <h4> tags instead of the <h3> that we defined in our script for example, and everything still works a treat. Just make sure and test before you release.

That’s All, Folks!

Really, that’s all there is to it … a little javascript and CSS, a dash of HTML and  you can accordion your text away in SquareSpace today!  If you can’t get it working, have questions or suggestions let me know in the comments – I’d love to hear your thoughts!

Of course if you’re really stuck, 43Folders can help!  Contact us today for reasonable rates and professional updates to that “no-code” website. We can improve your web page in situ or recommend and assist in moving to a self-hosted solution when that’s a better option.  43Folders has partnerships with hosting companies, financial institutions, and other resources that we’ve found save hassle – and money – while providing a professional, effective and manageable web presence for your company’s website and online storefront.