How to Make a Show More / Show Less Link in Squarespace

[@Carl_Johnson]

Here's the script you'll need to make this work. var SHOW_MORE = 'Show More' var COLLAPSE = 'Show Less' $(window).load(function(){ $('a[href^="#expand"]').each(function(){ var n = parseInt($(this).attr('href').split('-')[1]); var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n) next_n_divs.wrapAll(''); $(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; }); }); }); NOTE: Sometimes the expanding section doesn't work while you're in the editor in Squarespace. It doesn't affect the live site and usually refreshing the page fixes it in the editor.

[@AuburnElizabeth]

It says syntax error on line 1 when I copy and pasted it. I'm new at this so I am not sure how to fix it. Do you know what might've gone wrong?

[@JayCStyles007]

❤

[@MrNinjaRope]

Yes!! Great to see you again. Welcome to 2021, Carl!

[@Carl_Johnson]

Thanks Danny!!

[@samcrawford7861]

Bonkers how this is free - nice one Carl!

[@marceljanik3679]

Hey, Carl, thank you. You saved my ass. If anything deserves an affiliate commission, it's this concise, helpful type of content.:) Thanks!

[@Carl_Johnson]

Thanks Marcel!

[@ryanoxner]

Great tutorial, Carl. Really appreciate the videos you're putting up.

[@Carl_Johnson]

Thanks, Ryan! No problem.

[@josephrennie176]

Awesome tutorial Carl! How would i do it in reverse? So for example i want the 'show more" and 'show less' to expand the content above not below? Any Ideas?

[@kevincarvill6690]

Cheers Carl. Can't wait to try it out.

[@Carl_Johnson]

No probs Kevin!

[@austynsigler3939]

This works great! Anyway to do this, but for the next section? Meaning, I want the next section to expand and collapse as opposed to the following rows.

[@PjSmith]

I understand what you did but how do i make a read more under each of 3 columns: I have a testimony page and it has 3 columns across the page and under each image there is text that is quite long - I want to have read more for each of them. Can you help me with this or a workaround?

[@DrewBPalmer]

Thanks so much man! Worked like a charm. How would I make the list be expanded by default on page load?

[@vrushaliaher4582]

Does this code work for new 7.1 Squarespace too? Does it work on vertical video section underneath the "show more" section? Pls help

[@akalra8425]

Hi Carl, thank you for this wonderful tutorial, it works great. I have a question about the JQuery library being used. This code doesnt work with the latest JQuery library v3.6.0, would you know why? I would like to avoid having multiple jQueries on my website as I am already using the latest version.

[@aglaiaruffinojalles2244]

so helpful!

[@Allanarrow]

Thanks Carl. I want to use this on a page with summary blocks. The summary blocks are displaying store items of a certain category. Do you know how it will work there? My understanding is that this script will hide/show summary blocks (in my case) and not the rows of items within the summary block. Is that correct?

[@haziqahomarali2465]

hey carl, thanks for the tutorial👍🏻 Really helped me out and worked great for my site! But is there a way to expand the banner background once you click show more? The rest of my content hangs awkwardly on the edge of the banner section. Would really appreciate any help you can provide, thanks!

[@shawnpaarmann]

This is perfect and very hard to find, so thank you! One question: when I make the link text bold, it reverts to non-bold text when I click the link (with this code injected). Am I able to make the "Show More / Show Less" text to remain or be bold? Thank you

[@TheMusicInOurLives]

Will this work if the section I'm trying to hide is a "gallery" and not rows?

[@IsMiseRobyn]

Code injection seems to be a premium feature on square space. Do you know if there is a way to do this without upgrading? Thanks in advance :)

[@quinto551]

following!

[@RyanHeflin]

This works, but it bleeds into the section below, is there a way to fix this?

[@MrBobbydazzler1]

Thanks Carl. Is the jquery script the most up to date?

[@BurnedBurgoo]

are you able to do this for more than 1 section?

[@englishconversationschool]

Hi, I am facing a problem. like Not showing the footer content but This code is perfect working. I am using squarespace 7.1.

[@jamieparnell1458]

I'm assuming this no longer works because of the introduction of fluid engine. Any tips on how to get the function working again?

[@sinnister48]

Hi Carl! Does this work with the new Squarespace Website builder? I have done this on a previous website and it worked. But for the current website I am working on, it doesn't. Please help!

[@Carl_Johnson]

I haven't had chance to test it with Fluid Engine, but I can't imagine that it'll work.

[@markusthorsen7333]

Hi Carl. Thank you so much for this neat little trick! Works really well. I even dared to change the wording so it said something in Norwegian instead ;) hehe! I do have a question though, is there a way to move the "show less" / "close" text at the bottom of the stuff you've just expanded? I noticed especially in mobile view, once I had scrolled down to see everything that was expanded, the "show less" link was pretty far up and it didn't make sense for me to scroll "all the way up again" to close it? To give you some content, I have 17 logos in a 4x5 grid which looks really good on desktop, but its quiet a scroll on mobile. Hence I was pumped when I found your tutorial :) I decided to only show the top 4x2 grid and hide the rest. So then if I pressed the "show more" link and really wanted to see the remaining 4x3 grid, scroll all the way to the bottom... I then had to scroll "all the way up again" to hide the 4x3 grid. Does that make sense at all? I guess its not the end of the world, but would just be nice to "close the door" where you're at and not have to go all the way back :) Thanks again for the tutorial :)

[@annierose2378]

hi Carl, this was initially working for me but now isn't. All I have done is add some more custom code (from one of your other videos) to make 2 images on our page fade into another when hovered over. I've attempted to change it to a button, and change the number in #expand-(number) and also reinject the code - no luck! Any ideas?

[@Carl_Johnson]

Hi Annie, is it ok on your live site? Noticed some buggy behaviour when I was in the editor in Squarespace, but the live one was ok.

[@innersoundyork]

This appears to not be working anymorw! Had it on my site and it simply stopped doing as it's told. Did anyone get the same issue? Cheers guys!

[@fogaat]

I love your work sir. Trying to integrate some of the cool tricks and skills you have shared in your channel already. Thanks a lot for your time and effort to build such amazing content. Could you by any chance help make a video about how to best integrate bilingual script / translation facility to a single website. Am using Ishimoto Template & in process to build my creative footwear studio website in both Japanese (where am based) & English (for the much diverse audience). I tried already the conventional way by using 2 navigation bars and writing whole content separately in both languages with unique pages for both. But just curious if you can help do a magic or two for bilingual website prior too to widen up our audience with some cool & quick trick? Thanks a lot again.

[@Carl_Johnson]

Thanks Nishan! Have you tried Brad Good's method for making a multilingual site? www.bradgood.net/articles/multi-language-content-on-any-squarespace-template It's probably the best option I've come across.

[@englishconversationschool]

Will it work on Fluid Engine on Squarespace

[@Carl_Johnson]

I haven’t tested it, but I can’t imagine that it’ll work with Fluid Engine.

[@englishconversationschool]

@@Carl_Johnson it's not working on fluid engine

[@Carl_Johnson]

@@englishconversationschool No, I didn’t think it would.

[@joemelara502]

Will the hidden content/ text be index and seen by google?

[@aishwaryamaheshwari]

Hey where is the code, i cannot find it in the comments.

[@Carl_Johnson]

I’ve just pinned the comment - should be at the top now.

[@pentagram.digital8612]

nice video carl! as always. Seems not working with fluid engine anymore... do you have any other tricks for fluid engine squarespace 7.1?

[@Carl_Johnson]

Thanks! No I haven’t been able to find a solution for Fluid Engine unfortunately.