Jump to content

Megalomaniac

Member
  • Posts

    38
  • Joined

  • Last visited

Community Answers

  1. Megalomaniac's post in How do I create hide/show section of an entire page of text, images and or galleries in Squarespace (spoiler function/accordian/collapse)? was marked as the answer   
    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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.