Search the Community

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.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://www.calvin.no/ On the front page https://www.calvin.no/, how do I go about changing these things? Date format from "MM/DD/YY" to "DD.MM.YYYY" "Read more" to "Les mer" And on blog post pages, like https://www.calvin.no/solo/korrespondentbrev Date format from "Oct 26" to "26. oktober" (and so on) In the contact form, https://www.calvin.no/kontakt, is it possible for me to change the labels under the name fields ("First Name" and "Last Name") to the Norwegian "Fornavn" and "Etternavn"?

Site URL: https://www.buffalohistorypub.com/ Hi, I'm new to Squarespace 7.1 and I'm trying to create an events calendar. When I go to make my events page / summary block I've created an entry and excerpt. However, I'm not getting a "read more" option with an arrow showing up. This means obviously that people would have to click on the image which is less than ideal. I'm really at a loss on this one – anyone have any ideas on how to get "read more" to appear so that its obvious it is just an excerpt??

Site URL: https://tomato-hibiscus-5kcf.squarespace.com/ https://tomato-hibiscus-5kcf.squarespace.com/config/ password is Magnolia I have made my site bilingual by using a code block on each of the pages to hide either the French or English navigation, but I am trying to change the "Read More" link in Summary blocks to the French translation "Lire la suite" on just those French pages. Is this possible? Thank you

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 🙂

Hello! I'm in SS 7.1 and am trying to change the "READ MORE" text under the blog excerpt. I've already tried entering the following into the footer: Y.all('.inline-read-more').setHTML('Listen Here'); and the following in Custom css: .BlogList-item-readmore:before { content: ‘Listen Here’; } But neither are working- they worked in 7.0 😕 Any help would be greatly appreciated! Thanks 🙂

Site URL: https://sellwoodmoreland.com/businesses Hi! I am trying to find a way to show the read more link on specific blog posts. It will be for a business directory that will only link to the full profile (blog post) if they are a paid member. I've used CSS to turn off the image and title from linking to the blog post. Should I create links in the excerpt and use code to style them as buttons? If so, any help on what the code should look like? Or can I use the Source URL to link the blog post for those who should show a read more link and then create code to target that? Currently, the Read More button is showing for each post. Here is the webpage and password: https://sellwoodmoreland.com/businesses SMBA2021

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.

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

I currently have this code <details> <summary>[read more...]</summary> which allows me to have clients click the [read more] and expand to read the complete text. However the text "[read more] doesn't disappear, it stays on the page, with the expanded text below after it's been clicked on. Anyone know how to make the "[read more...]" text disappear once it's clicked to expand to the full text? The current code is <center><p><b> Founded in 1894, 4th generation Pascal Agrapart is humble, soft-spoken, and fiercely dedicated to expressing the terroir through his Champagne. Being in charge since 1984 and Pascal took the Domaine to become one of the finest grower estates in the Côte des Blancs. With 12ha of vineyards, throughout Grand & 1er Cru villages of Avize, Cramant, Oiry, and Oger, all owned and tended by the family with some vines in excess of 60 years of age...</b><details> <summary>[read more...]</summary> <p> <b> A natural approach is taken without the use of chemical pesticides or herbicides, the organic life of the soil is of utmost importance to assure the health and productivity of the vineyard. Ferments with the use of indigenous yeast are preferred which is considered crucial for wines to showcase terroir. To ensure the highest quality, Pascal limits his production in any given year. Ambroise Agrapart now joins his father at the Domaine and they continue to produce one of the most refined and complex wines in the region. Pascal has rebranded some of the cuvées under “Champagne Pascal Agrapart” to signify wines in which he is solely responsible for crafting. </b> </p> </details></center> Note: this website is currently under construction. Please refer to images attached.

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!

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://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

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://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

Hi I would like to align the read-more links to the left. I am able to change the colour using a.blog-more-link { color: #FF00CC!important; } but when I try to use text-algin: left; it doesn't seem to work? Any help would be really appreciated! Thank you

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

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!

I would like to list the services I offer and for the client to be able to "see more" so that I can add descriptions of the services. I do not have/want a products page because I don't wan't the client to purchase services online. I just need a way to show what is offered and add a descriptor that is accessed by a "see more / more info"

Site URL: https://roguesage.com/selected-writings I used a code (from @tuanphan who is always very helpful) in response to sararankin for my archive because I wanted to change the Read More copy. That part worked (changing the copy) but I got a long link now and the whole thing is off center. See attached. Any help from someone would be greatly appreciated. Many thanks for your time. All this is on 7.1