martelil Posted May 20, 2022 Share Posted May 20, 2022 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! Link to comment
tuanphan Posted May 21, 2022 Share Posted May 21, 2022 Hi, How about this? I helped a member recently. https://thung.squarespace.com/list-section-accordion?noredirect Pass: abc Before After clicking title/image melaniejaane 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
martelil Posted May 21, 2022 Author Share Posted May 21, 2022 Thank you @tuanphan – that's good solution. Even better if some of the bio is visible and the rest expands on a Read more-link or button. Do you have a code for this? Link to comment
tuanphan Posted May 23, 2022 Share Posted May 23, 2022 On 5/21/2022 at 1:51 PM, martelil said: Thank you @tuanphan – that's good solution. Even better if some of the bio is visible and the rest expands on a Read more-link or button. Do you have a code for this? Like this? Add a List Section > Paste this code into Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('li.list-item').each(function(i, e) { $(this).click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .list-item-media:hover, h2.list-item-content__title:hover { cursor: pointer; } .list-item-content__description { height: 0; overflow: hidden; transition: all 0.1s ease; } .tp-list-des-open .list-item-content__description { height: 100%; transition: all 0.1s ease; } h2.list-item-content__title:after { content: "Read Bio"; display: block; font-size: 14px; font-style: italic; margin-top: 20px; } .tp-list-des-open h2.list-item-content__title:after {opacity:0;} </style> CraigN 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
martelil Posted May 24, 2022 Author Share Posted May 24, 2022 (edited) Wonderful, thanks so much – this works great! I've managed to simulate an accordion block by replacing "Read bio" with a plus character. Is there a way to add a line beneath the name / + in order to make it even more like an accordian? And is it possible to make the + not disappear on click but turn 45 degrees? – But what I just realised is that all lists get the same "read bio" or + … even slideshows. Is there a way to have the code apply to only the specific list? This is the modified code: h2.list-item-content__title:after { content: "+"; display: flex; justify-content: right; font-size: 40px; font-style: none; margin-top: -25px; } Edited May 24, 2022 by martelil Link to comment
tuanphan Posted May 25, 2022 Share Posted May 25, 2022 16 hours ago, martelil said: Wonderful, thanks so much – this works great! I've managed to simulate an accordion block by replacing "Read bio" with a plus character. Is there a way to add a line beneath the name / + in order to make it even more like an accordian? And is it possible to make the + not disappear on click but turn 45 degrees? – But what I just realised is that all lists get the same "read bio" or + … even slideshows. Is there a way to have the code apply to only the specific list? This is the modified code: h2.list-item-content__title:after { content: "+"; display: flex; justify-content: right; font-size: 40px; font-style: none; margin-top: -25px; } Can you share link to page where you added the code? We can tweak it easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
martelil Posted June 1, 2022 Author Share Posted June 1, 2022 Thanks, but how do I share when the site is not published? Link to comment
tuanphan Posted June 2, 2022 Share Posted June 2, 2022 21 hours ago, martelil said: Thanks, but how do I share when the site is not published? Just setup password & share url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
LeonXDavis Posted October 31, 2022 Share Posted October 31, 2022 Hey, was just looking at this. Would it be possible to do something similar but on a team list? Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 11/1/2022 at 12:51 AM, LeonXDavis said: Hey, was just looking at this. Would it be possible to do something similar but on a team list? Can you share link to page where you use Team List? We can imagine easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarfaw Posted November 15, 2022 Share Posted November 15, 2022 This whole thread saved me hours! Thank you @tuanphan! I was wondering if there is a simple way to add "close bio" or "read less" as an alternative to clicking on a blank space to close the bio content? Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 On 11/16/2022 at 4:57 AM, sarfaw said: This whole thread saved me hours! Thank you @tuanphan! I was wondering if there is a simple way to add "close bio" or "read less" as an alternative to clicking on a blank space to close the bio content? You mean Initial: show read more/open bio Click on it >> Show text above read more/open bio, then read more/open bio text change to close bio/read less Click close bio/read less >> hide text + change text to open bio/read more Is this right? You will use List Section, is that right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarfaw Posted November 25, 2022 Share Posted November 25, 2022 yes that is exactly what I meant, thank you! And yes, with a List section. Link to comment
tuanphan Posted November 29, 2022 Share Posted November 29, 2022 On 11/26/2022 at 4:17 AM, sarfaw said: yes that is exactly what I meant, thank you! And yes, with a List section. Hi, I did a quick demo. You can check: https://thung.squarespace.com/list-section-readmore-readless?noredirect Pass: abc Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarfaw Posted November 30, 2022 Share Posted November 30, 2022 @tuanphan that is exactly what I was envisioning 🙂 Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 12/1/2022 at 6:09 AM, sarfaw said: @tuanphan that is exactly what I was envisioning 🙂 First, add a List Section Next, add this code to Page Header (page where you use List Section) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $('li.list-item').each(function(i, e) { $(this).click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .list-item-media:hover, h2.list-item-content__title:hover { cursor: pointer; } .list-item-content__description { height: 0; overflow: hidden; transition: all 0.1s ease; } .tp-list-des-open .list-item-content__description { height: 100%; transition: all 0.1s ease; } h2.list-item-content__title:after { content: "Read Bio"; display: block; font-size: 14px; font-style: italic; margin-top: 20px; } .tp-list-des-open h2.list-item-content__title:after { content: "Read Less" !important; } </style> If it doesn't work, please share link to page where you added List, we can check it again easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment