How do I create hide/show section of an entire page of text, images and or galleries in Squarespace (spoiler function/accordian/collapse)?

@Megalomaniac and @pgraves and @whatkarensaid First thank you for your code @Megalomaniac, it works very well when you always use the same name ID!

But I have the same need and the same problem. "... when I create more than one, only the first one works. What do I need to change in the header injection code to make it work for multiple buttons with different titles? --- all three buttons work to expand/contract but the buttons all revert to the same text as the first button on the page when collapsed."

I need too more buttons on the same page but with different names ID, I played a bit with the code and have the same as @pgraves, they work but then they reverse to just one of them. Anyone a clue? Please am getting nuts :((Thank you in advance

@Megalomaniac awesome function. I think I'm having a different issue than @ivy2015 but the solution is probably the same. I can't use "show more" or "show less" because I need the button to be understood by different languages. So I've changed the button phrases "show more" and "show less" in to appropriate fontawesome icons that allows any language to understand what to expect when they click the button. Which works fine!

However, when I collapse the content again to hide the blocks, the icons I've added revert back to Show More and Show Less.

I updated the header code in a way that (to me at least) means it should work. And to be fair it does work - but just once. As soon as I collapse the button my button styling reverts back to your original.

Any ideas?

@pgraves Hi there, please make sure that you are only adding answers to posts when there is a solution to provide. Otherwise, you will want to add your response as a comment. I've gone ahead and converted this comment for you.

@whatkarensaid Hi there, please make sure that you are only adding answers to posts when there is a solution to provide. Otherwise, you will want to add your response as a comment. I've gone ahead and converted this comment for you.

@Megalomaniac, can you pleeeeeease help meeee? Would love to know what I'm doing wrong. It's just for 8 image blocks with captions on a Page... I put the big code (along with ajax line) in Settings > Advanced > Code Injection... I put the button before the content.. I called it Show More and made it lead to #expand-8 ... I also tried lower numbers just to see... Nothing. Never worked at all. :(

Hi, I have tried the code but can't seem to make it work.Not sure what I am doing wrong...?https://monica-torrejon.squarespace.comUnder What we do section

Your help would be appreciatedthanks

@Megalomaniac this doesn't work for me at all, not sure what am i doing wrong...?the blocks of text under show more never disappear...?please help!

@Megalomaniac Megalo this is great and I have it working about 90%...

However I have an issue in that it works if you go directly to the page (www.ecke.audio/work or /work/) but when you navigate there from the homepage www.ecke.audio and click 'work' the menu is automatically open... if you refresh the page it works again but obviously defeats the object if it doesn't work at first time of asking.

Any help would be mega.

Thanks

I have offered another options, which IMO works better and loads instantly over here -> https://answers.squarespace.com/questions/176218/spoiler-button-hidereveal.html#answer-176381

I'm also anxious to know if there's a version of this to create multiple expanding headers on the same page with different names. For example, my goal is to create:

Exhibitions (expand-1) - - > Event summary block

Bio (expand-1) - - > Text block

Publications - - > Gallery list summary block

News- - > Blog summary block

This is already working fine for me as long as all the buttons use the same name (show more/show less) but is there a way to duplicate the process with different button texts?

I'm having this exact same problem! Have you figured it out?

In the Squarespace Editor, it works perfectly. When accessed directly from the URL, it works perfectly. BUT, when you get to the page with a hyperlink, it shows everything expanded already and only a page refresh will make it function correctly.

I'll do some digging, but let me know if you figure it out!

@megalomaniac

Jonny, I figured it out!

https://answers.squarespace.com/questions/188857/why-doesnt-my-javascript-code-work-until-i-refresh.html

It's basically because of Ajax scrolling, aka Infinite Scroll. If your site doesn't use it, you can disable it in Style Editor and your problem should be solved!

Best,Stephen

wow... I think i started a square space monster a long time ago!

SORRY, Ive been gone for a while everyone, working crazy hrs, but now I seem to have a lot of free time! Never even thought to look back here until i got an email the other day!

I must have spent hundreds of hours learning how to do some coding back then, and i profess that i am not a coder. but anything is possible i guess.

I truly forget a lot about what i learned back then, but recall that adding galleries and summaries were a problem, and also recall that no one had a solution, and i couldn't figure it out then.

Also if we look at the original post i spoke about, under exceptions, about Multiple injections on a page or index doesn't work. This was a big thing i found causes many issues.

What i can do is share with you all my site. And maybe you all can look at the code from the specific pages where i use the show hide, but i believe it is all the same as was posted years ago, which can be found under the resume section. Now, i know that, not everyone wants to produce the identical solution, as mine is much simpler and only contains text whereas some of you are looking to add a bit more to this, ie galleries, and i don't think the code has ever worked for that.

here is my site: www.anthonyashford.com

and the password to it is: confidential

Maybe Stephen's @shrothermel post about the ajax scrolling is a good idea. i'd look into that.

Or maybe the solution that @logaritym provided in 2017 has better results for your needs.

I wish i could be more helpful, but today i'm a little behind on what i was doing back then. I feel i'd have to relearn it all over, and i just may have to as im getting ready to revamp my site with all new work and make it more "architecturally minimalist" in feel.

What i had to do was a lot of trial end error, and this is just what you all need to do, keep trying until you get it!

I wish you all the best and ill try to be more active on here in the future.

Very nice solution @logaritym !

@squarehnd - Im sorry, ive been very far removed from this all. I hope you were able to find a solution.

@mandapop - Im sorry, ive been very far removed from this all. I hope you were able to find a solution.

@Towns - Im sorry, ive been very far removed from this all. I hope you were able to find a solution.
Multi languages sounds like multi pages for each language or is their a way to convert all text into what ever language?

@ivy2015 - Im sorry, ive been very far removed from this all. I hope you were able to find a solution.

is there a way to make this a "one-way" Show More button? to explain, i'm trying to have a Show More button that hides itself once you click it.

basically, it will show more like this code does but you won't be able to show less (unless you refresh the page, resetting the button)

Thank you!

Thanks to the website http://forthandwild.com/blog/squarespace-accordion-menu managed to get this up and running easily on this page https://www.futuregenerationtrust.co.uk/policy!