Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5
HireConrad

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

Question

24 answers to this question

Recommended Posts

  • 9

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!

Edited by enliteaustralia

Share this post


Link to post
  • 2

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.


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 1

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!

Edited by enliteaustralia

Share this post


Link to post
  • 1

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!

Edited by YellowTube

Share this post


Link to post
  • 1

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

Edited by RJ7

Share this post


Link to post
  • 1

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?

Share this post


Link to post
  • 0

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

Edited by naroush

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Edited by polnatal

Share this post


Link to post
  • 0

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

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

Edited by loliogd
Format code

Share this post


Link to post
  • 0

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,

Edited by loliogd

Share this post


Link to post
  • 0

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.

Edited by officeofus

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...