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

Megalomaniac · August 31, 2015

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 September 19, 2016 by chriscc
retag

Megalomaniac · September 5, 2015

Hi All, Megalo is back!

First... Ignore the previous code I submitted, and use this if your looking to add a Show More / Show Less feature to your squarespace site!

OK... We have a pretty good solution, however there seems to be some limitations to the code, but only in respect to Squarespace's pre-coded galleries and summaries.

I have tested it with text and single images and it works great. Unfortunately when I got to testing squarespace's galleries and summaries, the code was only successful for summaries in the 'wall' design format and galleries in the 'carousel' & 'stacked' design format. Any other design format for both galleries and or summaries will result in them not pre-loading. (blank)

I believe this is something that would take some considerable work for Squarespace to get all galleries and summaries design formats to work accordingly with this simple code, and would like all to request this fix.

Instructions:You can inject the code in the main header code injection, or the index header or individual pages or even at the base of a page, before where you want the page to show/hide.

Exceptions: When placing at the base of a page in an index of multiple pages, where you want the function to occur more than once, its best to just inject the code in the Index's advanced settings, instead. Multiple injections on a page or index doesn't work. So just have it done once. Hope that makes sense!

Additionally: The function will require a button of course. Using squarespace's button, add at the top of where you want the Show More / Hide More location to start. The "Text" area should read: 'Show More' and the "Click Through URL" should read '#expand-(number of blocks here)' (example: #expand-3 This will collapse the next three blocks.)

<script>
 /* This script is a custom script to control the 'show' / 'hide' extra feature.  
 To use: give each button you want to make an expander an href of "expand-3", if you want it to expand / collapse the next 3 blocks.

 Make sure to make each button say 'Show More' as its default text.
 */

 var SHOW_MORE = 'Show More'
 var COLLAPSE = 'Show Less'
 $(window).load(function(){
   // prepares all buttons by wrapping the correct # of following divs into a div with class 'extra_gallery'
   $('a[href^="#expand"]').each(function(){
     // parse # of sibling elements to wrap from href attribute and then wrap them.
     var n = parseInt($(this).attr('href').split('-')[1]);
     var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
     // this is the line that is different.  we use display:none; on the DOM element that wraps the additional gallery.
     next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
/*      // preload_images
     next_n_divs.find('img').each(function(){
       image = new Image();
       image.src = $(this).attr('data-src')+'?format=500w';
       console.log($(this).attr('data-src'));
     });
     // control for click behavior
     */
     $(this).click(function(){
       var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
       if (target_gallery.is(':visible')){
         $(this).text(SHOW_MORE);
       }
       else {
         $(this).text(COLLAPSE);
       }
       target_gallery.slideToggle();
       return false;
     });
   });
 });
</script>

Special Thanks & Coding by: Jim Li

Edited September 5, 2015 by Megalomaniac

Megalomaniac · September 10, 2015

Hi All,

Still looking how to fix the code to work for the other galleries and summaries.

I was playing around with the other 3 Summary blocks, (Carousel, List & Grid) & their Layout settings. Ive managed to get ALL Summaries to Work with the script above.

However, ONLY IF: Aspect Ratio is set to 'AUTO'.

I'm wondering if the images aren't loading when the aspect ratio is set to 1:1 or 2:3 or 16:9 etc, because I need to embed something in the code to allow the wrapped images to load???

Note: There is no Auto selection for Galleries, so this doesnt work the same as a fix, but Im a bit confused as to why the Gallery Carousel and Stacked do work.

Best to you all, Megalo

ISJ · October 27, 2015

Hi Megalo,

I followed your advice but couldn't get this to work. The steps i took:

Created a new gallery page. uploaded images and added the text I want to show and a button above it named "Show More" which has the external url #expand-3.
In the gallery page settings in the PAGE HEADER CODE INJECTION, pasted your code.
Created a new page and added a carousel summary linked to the gallery page. Set Aspect ratio to auto.

However the "show More" button doesn't seem to work. The text is always expanded/shown when loading the page. Any idea what I'm doing wrong?

Thanks,ISJ

Megalomaniac · November 2, 2015

Sorry, I'm just getting back to you now.Can you send me a link to review?

Your creating the button and hidden content in a 'page' right?

Is the page in a grouping of other pages in an index, if so, i'd place the code in the 'main header code injection' after any other code you have placed.

Oh you know what, check to see if you have the ajax script in there too. This is needed as the primary function to understand the code.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

This ajax script, above, should go before the main code. Place this In the 'main header code injection'.

the #expand-3 for the button url, count the quantity of blocks you have in the page you want to hide, below the button, replace the number of blocks with your 3, unless ofcourse its 3 blocks!Note: if you have multiple paragraphs started as multiple blocks, but then join them, the multiple paragraphs may count as one block. you'll have to test the quantity with your content.

so-in · November 5, 2015

works great - thanks - one question - when the page first loads should you see the sections that are hidden displayed - then hide/disappear until the button is clicked

JimmyP · November 8, 2015

This is great!Is there a way to hide/close any expanded summary galleries, if another button is pressed?

JimmyP · November 8, 2015

This is great!Is there a way to hide/close any expanded summary galleries, if another button is pressed?

Megalomaniac · November 9, 2015

JimmyP,

Not sure I understand what your asking. Are you suggesting a show more/show less button within a group of blocks already in a show more / show less containment?

If so, not sure if the code would work like that, might get confused, but if I were you, I'd just test it out to see if it works, and let us know.

Megalomaniac · November 9, 2015

I do know it did not like placing the code in each page, if there were multiple pages within an index that had the code, it was preferred to be in the main header code injection and then it worked. I would imagine that if you had multiple buttons within a page, that you would also need to place it in the main header code injection as well. I prefer that anyways, since you only have to do it once!

paige1570047875 · January 19, 2016

Thanks so much for this - it works great! I am wondering if it would be possible to have more than one button text (for example SHOW_MORE would be "Survey", "Information")? I have gotten numerous input texts, but when you click "show less" it just displays the first text again, regardless of what the original input is. I think this just requires more javascript knowledge than I currently have.

sharanya · February 12, 2016

This somehow does not seem to work for me. I added the code to an individual page (home page, in my case). The image blocks after the button are always visible, both on page load as well as when I click the button to toggle. The only thing that changes is the button text from "more" to "less" on click. Anything I'm missing here?

sharanya · February 12, 2016

This somehow does not seem to work for me. I added the code to an individual page (home page, in my case). The image blocks after the button are always visible, both on page load as well as when I click the button to toggle. The only thing that changes is the button text from "more" to "less" on click. Anything I'm missing here?

Justin · February 12, 2016

@sharanya Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment. I've automatically converted this for you.

February 15, 2016

Hey Megalo!!! You are a a great dude/dudette for offering so much great info/answers on this board!!!!

Is there any way you can link to an example of what these implement? It would be great to see what this offers nu-bees before designing content/implementing on our page?

Later,

g.

epernice · February 19, 2016

@Megalomaniac This doesn't seem to be working for me. I am using a normal page with a slideshow header. I injected the code in the main body, have a button called 'Show More', linked '#expand-2' with an image and a text block below it. When I save, the code appears on a black background above my banner and everything below the button is still visible. I would really appreciate help on this.

Thanks!

epernice · February 19, 2016

@Megalomaniac This doesn't seem to be working for me. I am using a normal page with a slideshow header. I injected the code in the main body, have a button called 'Show More', linked '#expand-2' with an image and a text block below it. When I save, the code appears on a black background above my banner and everything below the button is still visible. I would really appreciate help on this.

Thanks!

Justin · February 19, 2016

@epernice Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment. I've automatically converted this for you.

pgraves · March 2, 2016

@Megalomaniac - wow, this works awesome. Just what I was looking for, thank you!

I have a question though, I am trying to have multiple of these accordion-style buttons on one page, but 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?

Thanks again!

pgraves · March 2, 2016

@Megalomaniac - wow, this works awesome. Just what I was looking for, thank you!

I have a question though, I am trying to have multiple of these accordion-style buttons on one page, but 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?

Thanks again!

pgraves · March 2, 2016

to clarify, 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.

whatkarensaid · March 9, 2016

@Megalomaniac If you click a button, it opens a section. Is there anyway to click a second button and it closes the first section that was opened?

whatkarensaid · March 9, 2016

@Megalomaniac If you click a button, it opens a section. Is there anyway to click a second button and it closes the first section that was opened?

ivy2015 · April 20, 2016

@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

May 20, 2016

@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 May 20, 2016 by Towns
Initial Revision

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

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Megalomaniac

Guest

Guest

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources