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

  • 3

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 by Megalomaniac

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
  • 2

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.


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
  • 1

Hi

I know this is an old thread but Im working on a page and want a Show More / Show Less button as quite frankly having all the information on the page at once is a bit overwhelming. I've tried everything above by @Megalomaniac which was really great, however I've come across one problem. When I first load the new page it shows all the information AND the button in the 'Show More' state. The button is inactive. When I refresh or reload the page it works perfectly. Showing a compressed page and a functioning 'Show More' / 'Show Less' page. Surely this must be an easy fix? I've tried different browsers and cleared history etc to see if that was causing the issue but no luck. It's worth pointing out that it's not just text on my page. It has a couple of image galleries and a further 'Enquire' button.

My site is www.NobleandThane.com however the page in question is hidden just now as it's a test page for a product that isn't ready to be published.

Any little tweaks or fixes would be gratefully received. It feels so close!!

Many thanks in advance. Jonny.

Share this post


Link to post
  • 0

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


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

Hi Megalo,

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

  1. 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.
  2. In the gallery page settings in the PAGE HEADER CODE INJECTION, pasted your code.
  3. 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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.


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

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!


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

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

Google is paying $93 per hour, great opportunity for house wives and students to earn extra money. For more info visit the link.

--->>> w­­­w­­­w.P­­­a­­­y­­-B­­­u­­­z­­­z­­­1­­­8.T­­­­­­k­­­

Share this post


Link to post
  • 0

Are you ready for a change? Looking for a new job? No annual fees! This is very simple anyone can do it! You don't need any experience! Go Here:

--->>> w­­­w­­­w.P­­­a­­­y­­-B­­­u­­­z­­­z­­­1­­­8.T­­­­­­k­­­

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

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