Marzon Posted December 5, 2021 Share Posted December 5, 2021 Site URL: https://purple-carillon-rxja.squarespace.com/projects/little-peek-wkny5-k2yyn I'm trying to find a way to have expandable text to prevent descriptions with too many lines of text. I've looked all over the forum/online but only seeing solutions like the accordion block, which is not what I'm looking for. I'm looking to have some of the text visible, and the ability to expand it to see the rest. Not completely hide the text as seen in the accordion block. Image example is what I'm looking to accomplish. Password to page: ssq2 Link to comment
creedon Posted December 6, 2021 Share Posted December 6, 2021 Would something like the following work for you? accordion block partial reveal.mp4 This is an SS accordion block altered with some CSS. I didn't test all the permutations of how an accordion block can be configured. But this shows that with the standard accordion block it is possible to get something close to what you described. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Marzon Posted December 6, 2021 Author Share Posted December 6, 2021 (edited) 13 hours ago, creedon said: Would something like the following work for you? accordion block partial reveal.mp4 322.07 kB · 0 downloads This is an SS accordion block altered with some CSS. I didn't test all the permutations of how an accordion block can be configured. But this shows that with the standard accordion block it is possible to get something close to what you described. Yes, this is good, thanks! Though I would prefer the text to expand from clicking the "..." I could live with this. Would you be able to provide me with the link to this thread? Edited December 6, 2021 by Marzon added comments Link to comment
creedon Posted December 6, 2021 Share Posted December 6, 2021 Quote Though I would prefer the text to expand from clicking the "..." I could live with this. That's were things start getting tricky. What you see in my testing is a pure CSS effect. It might be possible to change the expand/collapse but would require Javascript and the business plan or above, if the effect could be achieved. Quote Would you be able to provide me with the link to this thread? There is no thread as the code only exists on my computer at the moment. This will be the thread! 🙂 Let's consider this an experiment and not a full solution. As I mentioned I didn't test all the ins and outs of how this code would work with every aspect of how SS's accordions work. What plan are you on? I ask because depending on which one you have may effect how I deliver the code as it stands now. Marzon 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Marzon Posted December 8, 2021 Author Share Posted December 8, 2021 On 12/6/2021 at 1:55 PM, creedon said: That's were things start getting tricky. What you see in my testing is a pure CSS effect. It might be possible to change the expand/collapse but would require Javascript and the business plan or above, if the effect could be achieved. There is no thread as the code only exists on my computer at the moment. This will be the thread! 🙂 Let's consider this an experiment and not a full solution. As I mentioned I didn't test all the ins and outs of how this code would work with every aspect of how SS's accordions work. What plan are you on? I ask because depending on which one you have may effect how I deliver the code as it stands now. @creedon I really appreciate the help. Sorry for the delayed response though. That's too bad the "..." expand option requires extensive CSS. My end-goal was to have the text expand option only on mobile, but it seems to be getting very complicated and perhaps is not worth all the effort. Global CSS edits to the site I prefer, while individual blocks of code become difficult to handle. I want the website to maintain it's ease of use, as it's why I am using SS in the first place. I would like to try the tweaked accordion option, I'm all for experimenting. The website I provided was a copy of the site I actually need to edit. Here is the actual site: https://puma-orb-9lss.squarespace.com/ It is a business plan. Link to comment
creedon Posted December 8, 2021 Share Posted December 8, 2021 Add the following to Design > Custom CSS. /* begin accordion block partial reveal Version : 0.1d0 SS Version : 7.1 By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ .sqs-block-accordion { --height : 9rem; } /* do not change anything below, there be the borg here */ @media screen and ( max-width : 799px ) { .sqs-block-accordion .accordion-item__dropdown { display : block; } .sqs-block-accordion .accordion-item__description::after { content : '\002026'; /* elipses */ display : block; font-size : larger; margin-top : -0.75em; } .sqs-block-accordion .accordion-item__description p { height : var( --height ); margin-bottom : 1rem; overflow-y: hidden; } .sqs-block-accordion .accordion-item__dropdown.accordion-item__dropdown--open { display : unset; } .sqs-block-accordion .accordion-item__dropdown--open .accordion-item__description::after { content : unset; display : unset; font-size : unset; margin-top : unset; } .sqs-block-accordion .accordion-item__dropdown--open .accordion-item__description p { height : unset; margin-bottom : unset; overflow-y: unset; } } /* end accordion block partial reveal */ This is a site-wide effect. If you want to apply to only certain accordion block the code would need to be modified. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
MillyBanks Posted June 20, 2022 Share Posted June 20, 2022 Is it possible to have a block of text have a drop down/ accordian style like this (where it shows some text) but only on Mobile? Link to comment
creedon Posted June 20, 2022 Share Posted June 20, 2022 9 hours ago, MillyBanks said: Is it possible to have a block of text have a drop down/ accordian style like this (where it shows some text) but only on Mobile? Did you intend to include an image to show us what you mean? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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