SquareSpace Accordions Made Easy

by | Mar 25, 2016 | Web Design | 8 comments

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.

icon-no-codePutting 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.

8 Comments

  1. David

    This was working great for my FAQ page, but now seems to not work unless I visit the page and then reload it. I believe it stopped working after switching to a different SquareSpace template, Heights, that has parallax scrolling. That might be unrelated, however. Any help would be much appreciated!!

    • Michael Kastler

      Hi David! It sounds like an issue with loading either the javascript or the CSS for that section is being delayed or cached … but difficult to tell without a link to your site. I think your guess of it being due to the change in theme makes sense – whether related to the parallax scrolling or not it’s very possible that they load code differently.

      One thing you could try – if the theme is preloading a different version of javascript or jquery that could be messing it up – so perhaps remove the first script line in the javascript, that is forcing it to load jquery v1.10.

      I’d also recommend calling the more recent versions of both jquery and jquery-ui. They’re up to 1.12 now.

  2. Géraldine

    Hi, it works great thanks however when I use this code for multiple blocks that are side by side on the same page, it changes the organisation of the page and put the blocks one below the other… Could you please help? Many thanks

    • Michael Kastler

      Hi Géraldine! That sounds like a styling issue – the accordions are taking up too much space on the page side-by-side, so Squarespace is collapsing them so as not to create a problem with your layout.

      You could look at altering the width of the page as a whole, or reducing the width of the accordions, and see if that helps? Without seeing your page it’s difficult to know for sure but that’s where I would start.

  3. Tina

    Hi Michael! Great post. I was wondering if there’s a way I can add images to the drop down text?

    • Michael Kastler

      Hi TIna – anything you put in that div tag under the accordion h3 should appear – if you place images, paragraph text, or even youtube video iframes or anything else it should all work. Is there something specific you were trying to do and can share code and links to the live site?

  4. Rose Kenton

    Thank you so much for this! Is there a way to have the first question expanded ? I can’t figure that out! Thank you!!

    • Michael Kastler

      Hi Rose, thanks for being patient on the reply here – not sure if you’re still looking to solve this issue, but it’s pretty easy if you are!

      All that you’d need to change is the line in the script where it says “active: false” and either remove that line entirely, or change it to read “active: 1” (or the number of the accordion you want open).

      There’s more detail here: https://api.jqueryui.com/accordion/#options

      Hope that helps and sorry again for the slow response!