Search the Community

Hi there! I have a team section using simple list and would like to have the button on each team member open full bio without leaving the page. Either as a dropdown or lightbox text. It seems that the button by default can only link to a page, website, file etc. Any help on this is greatly appreciated!

Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237 Hi guys, After a long time with Squarespace community, I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own. Let 's move to the cool part Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it. step 1.mp4 Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.js"></script> <script> $(document).ready(function() { if (window.self!==window.top) { return; } $("[href='#read-more']").each(function(i, el) { // First calculate the initial space between the content and the readmore tag const contentEl = $(el).closest(".html-block, .sqs-block-content, .summary-excerpt, .image-subtitle"); const elBound = (el.getBoundingClientRect()); const contentBound = (contentEl[0].getBoundingClientRect()); contentEl.readmore({ collapsedHeight: Math.floor(elBound.y - contentBound.y), speed: 500, embedCSS: true, lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>' }) }); $(document).on("click", "[data-action='collapse-rmjs']", function() { const readmoreId = $(this).attr("aria-controls"); const contentEl = $(`#${readmoreId}`); if($(contentEl).closest('.sqs-block-image').length) { contentBound = $(contentEl).closest('.sqs-block-image')[0].getBoundingClientRect(); } else { const contentBound = (contentEl[0].getBoundingClientRect()); } window.scrollTo(0, windown.scrollY + contentBound.top); }); }); </script> <style> /* Tweak readmore js to hide the placeholder link */ [id*=rmjs] { transition: height 200ms; overflow: hidden; } [id*=rmjs] [href='#read-more'] { display: none; } body.sqs-edit-mode [href='#read-more'] { display: inline-block !important; } [data-readmore-toggle] { /* color of read more */ color: red; } </style> Notice: You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content step 2.mp4 After applying 2 above steps, here is the result you can achieve result-readmore-readless.mp4 Is it hard for you to follow my steps? Does it work properly on your site? If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me. 'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community Thanks for your attention! Support me by pressing 👍 if this useful for you

Site URL: https://www.janforcolorado.com/es/comunicados I have duplicate pages on my site for english and spanish language versions. However, I need to switch the "Read More" links on the squarespace pages to spanish using a custom change. How can I change that verbiage without changing it throughout the site?

Hi, I need to be able to click "read more" under the pictures to trigger a pop-up or lightbox of text that will have the full bio (several paragraphs) for each person. Can't seem to figure it out so far. Help would be greatly appreciated. Thanks.

Site URL: http://www.ryanheflin.com Hello, I have tried using code to create a "read more/read less" button on one of my sections. This has worked, but the text bleeds into the next section instead of expanding the background of the section its on to accommodate the text. Help please!

Site URL: https://www.youaregreat.co/divine-masculinity Hello, I'm having issues getting my content to display upfront. I'm not sure what I am doing to cause this read more link to get to the content. Please help and thanks.

Site URL: https://martinodibeltuloconcu.com/ Hello, I'm trying to set up a blog to appear on a summary block titled "Selected essays," and another below it, "Recent translations." When I click either on the titles or on the "read more" links they are inactive. In short, I can't seem to link the blog content to the "read more" and the title of the article. Thanks very much for your help.

Site URL: https://salutem.squarespace.com/ Hi, I´m trying to change the read more link in blog posts. I have tried several alternatives and neither of them worked. I also need help with changing the back-text to something else in mobile menu. I´m currently using 7.0. version Basil template. I appreciate any help with this! 🤗

Site URL: https://www.2680.no/spisesteder Hi! I´m in the process of making a multilingual website, and for my non-english site, I need to change the text, of the "read-more link" in a summary block. Can anyone help? Thanks!

Site URL: https://www.forthrightadvising.com/blog/push-and-pull-communications Hey there, I know that in a Summary block, when "Excerpt" is unchecked, the "Read More" button won't show up even when toggled on, but I've been trying to alter that with CSS. I've got Summary Blocks (carousel design) at the bottom of every blog for this client and we don't want to excerpt but we DO want a "Read More" option to show up below each: I'm still in my CSS learning curve, so naturally, the CSS I've been playing around with hasn't worked so far. I've been attempting different iterations of this: I've got Summary Blocks at the bottom of every blog for this client, so a site-wide/summary-block-wide code (that works better than my rudimentary attempt) would be lovely. Side notes: I DO have CSS for the arrows on the Summary Block (carousel design) that I can provide if need be, though none of it isolates the "Read More" links, just the ".sqs-gallery-controls." It's also a 7.0 site in the Brine family, if that info is needed. Happy to provide whatever else might be helpful too! Thanks all 🙂

I'm currently working on moving a website from version 7.0 to 7.1 and in the current version there is a code block that contains code that makes it possible to click a button that says "read more" so more of the text becomes available to read so the webpage doesn't become too long, and after clicking it, it changes to "read less". When I try to implement the same code on the new website it doesn't work. Any suggestions on how I could solve this problem and why the old code doesn't work?

Site URL: https://www.uscthetatau.org/meet-us-alum Hi there, I was wondering if there was a way to specify which blog posts the "Read more" link pops up on? Any suggestions would be greatly appreciated! Thank you in advance.

My .entry-more-link text disappeared on my native blog page. I did format this text months ago with custom CSS, but am not sure why the "read more" text suddenly disappeared. The arrow associated with link is still visible. Any thoughts? fivedesign.co/blog

I would like to make it look more like a button spreading across the entire page with a little more pop. I'm using a custom template. Thanks!

When I put a text or paragraph in my website (Not a Blog) I want visitors to have a read more option so when they click they are redirected to the paragraph which contains the whole information (not a new page - just want to expand the existing reading section). Thank you

Hi Can any one help me understand one only one of my html code blocks work on squarespace? I have been able to have 2 markdown codes work on the same page, but with the HTML code it does not. I have two post, same html code, just different content. The code is for a read more/read less button. One works fine, but when I click on the other read more button it enables the first post to drop down instead of its own (second post). This is the code below - from some reading i think i need to add an element within the code that allows both or work separately on the same page? <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #more {display: none;} </style> </head> <body> <h2>Read More Read Less Button</h2> <p>CONTENT<span id="dots"></span><span id="more">eCONTENT.</span></p> <button onclick="myFunction()" id="myBtn">Read more</button> <script> function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } </script> </body> </html>

Site URL: https://corn-apricot-zn88.squarespace.com/ I am trying to hide specific "read more" text on my summary block on my "people page" I have it all turned on in the display settings and then wrote CSS to turn it off. And then I tried to target the specific BLOCK to turn it back on. Basically, I only want it to show and click through on 10 or so of the 70 people shown. It is either all on or all off, but it seems like I should be able to target text block and change this. no password

Site URL: https://davidbrewsterwriter.com/blog I have a two level question relating to Bedford template: I want to change the 'read more' text on blog excerpts. I tried using the following custom CSS (as per other answers relating to other templates) but no luck. Bedford has a 'data-read-more' tag that I don't seem to be able to target. a.entry-more-link span { visibility: hidden; font-size: 0; } a.entry-more-link span:before { content: "Listen"; visibility: visible; font-size: 13px; } a.entry-more-link span:after { visibility: visible; } If I have more than one blog on my site, is there a way to target a change like this to a specific blog? Is it the same as targeting other pages using the relevant collection id? Thanks, David

Site URL: https://newcommunity.org.uk/sunday-talks A few months ago I managed to change the default 'read more' link at the bottom of each of our Sunday talks to 'listen'. Each talk is a blog post. However, I have just discovered that when I access the page from the menu (Resources>Sunday Talks) it reverts to saying 'read more' rather than 'listen'. Not a massive deal, but I reckon most people who are accessing the page will come in via the menu. If I refresh it, it then reverts back to 'listen'. Given that I'm not entirely certain how I fixed it in the first place, any ideas as to how I can make sure it always says 'listen' regardless of how you access it? I'm attaching a picture of what I found in the Custom CSS section that might be how I fixed it in the first place.

Site URL: https://water-pro.squarespace.com/ultraviolet-disinfection/uvlw-range-800-watt-amalgam Password: waterpro As you can see these product pages have way too much text. Does anyone know of a plugin or custom code that will add a 'Read more' toggle to reveal more text. Here is an example: https://www.rockshop.co.nz/shop/roland-dj808.html Or any other suggestions would be perfect. Cheers, Brent

Hello! I'm working on a website design using the Mercer template. I have updated the 'Read More' links of blog summary blocks to buttons. I would love to remove the arrow which follows read more. Here's the website (password: realestate). Please refer to the 'Featured Listings' section (as pictured below). Does anyone know how to do this? Many thanks!

Site URL: https://recorder-jaguar-6lxy.squarespace.com/ On the site I am working on, I need the 'read more' buttons to be aligned. Help!

Hi smart people! First time using SS, and needing to add in a 'read more' button as there are a lot of large bodies of text throughout one page. Its a podcast page and all of the text is relevant, it just makes the page rather cumbersome and messy - any help would be enormously appreciated!!!

Site URL: https://www.afrolatinfestyeg.com/gallery Hello there, I want to change the *Read More* button in my gallery of image to *Relieve The Moment*. Tried using some of the scripts in other questions like these but they did not work. The website URL is: https://www.afrolatinfestyeg.com/gallery Would really appreciate any help 🙂 Thanks in advance

Site URL: https://www.manueltarquini.com/blogtutorials Hi, how can I edit "Read More" to a "custom text", with a custom text size and colour and a background color (as a button)? I have a Wexley template and SS 7.0 https://www.manueltarquini.com/blogtutorials thank you