melaniejaane Posted November 4, 2022 Share Posted November 4, 2022 (edited) I'm creating a contact directory for extra healthcare providers. I want to have their name visible as well as the category + tags which would include what they do (eg. Psychiatrist), clinic name, and where they're located (Auckland, National, Online, etc). Then the rest of their details to be hidden as a dropdown. I've seen some code to do this for list sections so was wondering if it could be applied to blog posts or summary blocks? I don't mind which one I use, I thought the Blog post page may be easier as you don't have to add code to style the text (I assume it would take a while to style each line of text in the summary blocks). The reason I want all the info to stay in the excerpt and not click through to the blog page is because eventually I would like to add a filter so people can search by comments / practitioner type / location etc. Just don't have the funds yet for extra plugins. If it helps I do have the Lazy Summaries plugin. I also have this code to turn off clickthrough url to blog post, may not be helpful? <!--<style> .summary-title { pointer-events: none !important; } </style> Edited November 4, 2022 by melaniejaane Link to comment
Beyondspace Posted November 4, 2022 Share Posted November 4, 2022 5 hours ago, melaniejaane said: I'm creating a contact directory for extra healthcare providers. I want to have their name visible as well as the category + tags which would include what they do (eg. Psychiatrist), clinic name, and where they're located (Auckland, National, Online, etc). Then the rest of their details to be hidden as a dropdown. I've seen some code to do this for list sections so was wondering if it could be applied to blog posts or summary blocks? I don't mind which one I use, I thought the Blog post page may be easier as you don't have to add code to style the text (I assume it would take a while to style each line of text in the summary blocks). The reason I want all the info to stay in the excerpt and not click through to the blog page is because eventually I would like to add a filter so people can search by comments / practitioner type / location etc. Just don't have the funds yet for extra plugins. If it helps I do have the Lazy Summaries plugin. I also have this code to turn off clickthrough url to blog post, may not be helpful? <!--<style> .summary-title { pointer-events: none !important; } </style> Can you show up some screenshots/samples you want to achieve? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
melaniejaane Posted November 5, 2022 Author Share Posted November 5, 2022 18 hours ago, bangank36 said: Can you show up some screenshots/samples you want to achieve? Hey @bangank36 thanks so much for looking into this! I haven't finalised design yet but thought functionality kind of like a large accordion grid. Do you think it looks achievable or is there a better way to do it? Thanks again! 🙂 Link to comment
Beyondspace Posted November 5, 2022 Share Posted November 5, 2022 8 hours ago, melaniejaane said: Hey @bangank36 thanks so much for looking into this! I haven't finalised design yet but thought functionality kind of like a large accordion grid. Do you think it looks achievable or is there a better way to do it? Thanks again! 🙂 I think we can work around with this layout by using the People section To show and hide the information, I think you can get reference from the following post: Hope it makes sense Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
melaniejaane Posted November 6, 2022 Author Share Posted November 6, 2022 19 hours ago, bangank36 said: I think we can work around with this layout by using the People section To show and hide the information, I think you can get reference from the following post: Hope it makes sense I actually did see this post and tried it out, only problem is it hides all of the description and there is no option to add the extra info like categories, tags etc. I was hoping there would be a way to replicate that code but apply it to blog posts or summary blocks. Do you know if that's possible or really complicated? Link to comment
melaniejaane Posted November 7, 2022 Author Share Posted November 7, 2022 @tuanphan @bangank36 Thank you both for looking into this. Links to website and comment from other thread below: Summary block page: https://www.beehyve.health/adhd-support Blog posts: https://www.beehyve.health/adhd-support-contactsPassword: abc Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 On 11/7/2022 at 2:27 PM, melaniejaane said: @tuanphan Thank you both for looking into this. Links to website and comment from other thread below: Summary block page: https://www.beehyve.health/adhd-support Blog posts: https://www.beehyve.health/adhd-support-contactsPassword: abc I did a quick demo with summary block here. You try checking 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
melaniejaane Posted November 10, 2022 Author Share Posted November 10, 2022 13 hours ago, tuanphan said: I did a quick demo with summary block here. You try checking Thanks so much @tuanphan! What code should I use to replicate your demo? Also is it possible to turn off the title's click-through link to blog post page without turning off the click dropdown function? Thanks again! 🙂 Link to comment
Solution tuanphan Posted November 12, 2022 Solution Share Posted November 12, 2022 On 11/11/2022 at 4:05 AM, melaniejaane said: Thanks so much @tuanphan! What code should I use to replicate your demo? Also is it possible to turn off the title's click-through link to blog post page without turning off the click dropdown function? Thanks again! 🙂 Add Summary Post with Excerpt Add Click Me text (use Heading 4) to top of Excerpt Next, add this code to Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.summary-item').each(function(i, e) { $('h4').click(function() { $(this).toggleClass('tp-list-des-open'); }); }) }); </script> <style> .summary-v2-block h4~* { height: 0; overflow: hidden; transition: all 0.1s ease; } .tp-list-des-open~* { height: 100%; transition: all 0.1s ease; } .summary-title-link {pointer-events: none;} </style> Explain Script code: when clicking h4 in Excerpt >> Toggle a class name: tp-list-des-open style code (first code): make excerpt invisible by setting height 0 style code (second code): make excerpt appear by increasing height to 100% (= height of summary item) style code (third code): disable title click 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
melaniejaane Posted November 15, 2022 Author Share Posted November 15, 2022 (edited) Thank you so much @tuanphan so incredibly helpful! Only issue is now that I have added in the ellipsis icon - I notice weird and inconsistent gaps between the elements. It's hiding the text correctly but for some reason is keeping the white space / margin between the lines of text. Would you have any ideas of how to target this? Everything I've tried isn't working. Thanks again! Edited November 18, 2022 by melaniejaane Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 On 11/15/2022 at 3:16 PM, melaniejaane said: Thank you so much @tuanphan so incredibly helpful! Only issue is now that I have added in the ellipsis icon - I notice weird and inconsistent gaps between the elements. It's hiding the text correctly but for some reason is keeping the white space / margin between the lines of text. Would you have any ideas of how to target this? Everything I've tried isn't working. Thanks again! Can you share link to page where you added it? We can check 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
melaniejaane Posted November 22, 2022 Author Share Posted November 22, 2022 17 hours ago, tuanphan said: Can you share link to page where you added it? We can check it easier Thanks @tuanphan I ended up going back through all my blog posts and changing the bold text to H4 so I it was easier to target. Then tried some new code, managed to fix it. Thanks so much for you help! 🙂 tuanphan 1 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