Expand text to show more text.

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

Would something like the following work for you?

13 hours ago, creedon said:

Would something like the following work for you?

 

 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?

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.

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. 

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.

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? 

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?