Jump to content

How can I create accordion style hide/show blocks of text?

Recommended Posts

  • 2 weeks later...
  • Replies 24
  • Views 55.2k
  • Created
  • Last Reply

I had the exactly the same issue, and I used this guide and it works brilliantly:


The JavaScript goes into the page's Page Settings > Page Header Code Injection (How do I configure my page settings?)

If you want to make sure it's what you're after, take a look at our page to see it in action:http://enlite.net.au/iphone-ipad-icloud-101

Good luck!

Link to comment
  • 2 months later...
  • 1 month later...
  • 3 weeks later...
  • 5 months later...

The answer works perfectly. I have made font changes to suit the styles I am using however I cannot change the heading text from bold to normal. I have made it italic and adjusted the size but no matter what I try, it stays bold. Even "font-weight:400" and "font-style: book" do nothing.

Am I reading over a line of code that is causing it to always be bold?

Link to comment
  • 7 months later...

Is there any way to add more then just three items?

I would think that it would be as easy as adding more to the format of ("a1","a2","a3",a4",a5"… etc.)but then I do that, I can still only toggle the first three; moreover, any additional item will toggle the first three items.

Link to comment

I’m using the code provided and it is working but the page I am adding it to has a colored background so when it opens the hidden content after clicking the heading it has a white block to the left of the text.

It is on a FAQs page I am creating so the heading is the Question and the open content is the answer. When the answer is shown under the Q: and to the left of the full answer is a white bock, but the background behind the actual text is the correct color of the site. The white area is just in the empty space to the left of the answer. Does anyone know how to fix this so it is the same color of the rest of my site?

Also, how do I change the style and fonts to match the settings of my site?


Link to comment
  • 1 month later...
  • 2 months later...

Ok, I see where my issue is - I should read instructions better. It is said in the header code injection bit:

"var divNum = new Array("a1","a2","a3");  // at the left you should add a1, a2 etc. for each header you wish to include
                                         // so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
                                         // enclosed in double quotes

...and I did not add "a4" for my 4th accordion. Problem solved.

Link to comment
  • 6 months later...

Sandeep's script is lightweight and simple to use.

For the intended page, inject the script into the page's header. I would, however, remove the following from the code:

border-left:white 20px solid; color:#404040; font-family:verdana,arial,helvetica,sans-serif; font-size:9pt

Doing so allows content to default to your template's style sheet font attributes. If you do want an indent for your content, then leave the 'border-left:white 20px solid;'. But if your page background is not white, you'll see a white line. Use margin or padding-left instead.

All you really need to initially hide the content is this:


I would put other attributes to control fonts, colors, indents, etc, inline with the HTML within your code block.

I have a working example here:


Link to comment
  • 3 weeks later...
  • 1 year later...

Hello, would you know how to keep accordions opened when clicking on another one?

Currently, when Accordion 1 is open and the reader clicks on Accordion 2, Accordion 1 closes automatically.

I would like to keep Accordions open when the user clicks on the other ones. If he wants to close them, he can then do it himself.

My main issue is when the text in Accordion 1 is very long, clicking on Accordion 2 makes the text sometimes jump off screen (because Accordion 1 has closed and left a lot of space to fill)

Link to comment
  • 7 months later...

Can you advise me if there is a way to hide the button, once it is clicked?

For example, I want to add a read more>> button, but once it is clicked, I'd like for it to not display, or for it to drop to the bottom of the expanded text and read, show less.

Thanks in advance.

Link to comment
  • 5 months later...


I've succesfully inserted the neccesarry code to create a collapsible textblock.When I'm in Squarespace it all seems to be working fine.However, when viewed in the browser (not logged in) the textblock is already expanded and cannot be collapsed again. Any thoughts on what might be causing this?

Apart from some css I did not change any of the code and followed the instructions on http://www.sivamdesign.com/scripts/dwld/coltext1all.html.Would love to hear from someone.



Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.