Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Megalomaniac

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

Question

I'm trying to reduce my individual portfolio project pages to a few main images and the rest of the page that may contain additional text, galleries or images, to essentially hide unless prompted by the viewer. call it an accordion or a spoiler function or collapse, not best with terminology.

I started by looking at this thread, which has a simple and elegant approach for text only.http://answers.squarespace.com/questions/72321/how-do-i-create-hideshow-faqs-in-squarespace-collapsed-text

This is great for those circumstances, but I need it to include galleries and images or the like.

Does anyone know how this can be done or a variant of it that may also work?

Edited by chriscc
retag

Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post

Recommended Posts

  • 0

@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

Share this post


Link to post
  • 0

@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?

Edited by Towns
Initial Revision

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

@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. :(


http://MANDAMILLER.COM

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Edited by dsfx1
Initial Revision

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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.


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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

Edited by Megalomaniac
Initial Revision

Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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.


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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.


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

Very nice solution @logaritym !


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

@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?


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post
  • 0

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)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...