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

Hi,could someone point me to how to create the drop down text found on this page:

http://workshops.squarespace.com

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

http://www.sivamdesign.com/scripts/dwld/coltext1all.html

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!

Where does the body code go?

The body code goes into a Code Block (set to HTML, with Display Source unchecked) wherever on the page you want the accordion content to appear.

Thanks a lot enliteaustralia. On the examples, they only used text. Do you think it will work with audio / image blocks as well?

In all honesty, I don't really know - I don't have much knowledge of HTML but you could always try it. The principle is the same. Let me know how it goes!

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?

I'm new to using HTML. Could someone tell (or show) me where in the code I need to enter the name of the header and my text (for the drop-down part)? I'd really appreciate it! Thanks!

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.

@polnatal, you have to wrap each in quote marks, like so:

"a1","a2","a3","a4","a5",

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?

Thanks,

Go into the HEADER code and change the line:

border-left:white 20px solid;

To be 0, instead of 20px - it’ll disappear:

border-left:white 0 solid;

Hope that helps!

I have tried adding the code into the custom CSS but I cannot get anything to work, it is saying Syntax error. Can anyone give me clearer instruction on how to add expandable/ drop down text boxes? It would be a massive help.

Sure,

there are two places where you need to copy paste code to, and you need to make a code block on your page.

inside the code block paste the second part of code into that with html mode enabled, then go find page content click > settings >advanced and inject the top part of code into that

*nothing goes into custom css

Could you explain in more detail please. I have very basic knowledge of doing this type of editing. How do I make a code block? Thanks so much

Have a read through this page http://help.squarespace.com/guides/what-are-blocks

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.

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:

{display:none;}

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:

https://chiforme.squarespace.com/blog

Hi, I'm wondering if there's a way to customize this script so that the menu is collapsed by default?

Thanks!

Hi, I'm wondering if there's a way to customize this script so that the menu is collapsed by default?

Thanks!

It is collapsed by default. Did you mean expanded by default?

Hi, thanks for your reply. Mine seems to be expanded by default. I'm sorry I can't include a link to my page since I'm still running a trial.

Any reason why it might be auto-expanding?

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)

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.

Hello,

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.

Cheers!

Jet