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 blocks 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?

On 12/8/2021 at 10:18 PM, creedon said:

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.

I attempted this as is and it did not work while in web view , it did somewhat work in mobile view

however the text had not shrunk,

https://chinchilla-tiger-3ht8.squarespace.com
PW:
CtrlV
 

11 hours ago, AverageCtrlC_CtrlVer said:

I attempted this as is and it did not work while in web view

As mentioned in this thread.

On 12/6/2021 at 10:55 AM, creedon said:

Let's consider this an experiment and not a full solution.

On 12/8/2021 at 9:12 AM, Marzon said:

My end-goal was to have the text expand option only on mobile

The main takeaway is that with CSS only we don't think you can get a satisfactory result. It might be possible to get further with some JavaScript to help make some intelligent decisions about how to apply CSS. This code would not be easy and I know of no such code that currently exists.

I too am looking for a solution to this. I have a long bio that I would like to collapse to just the first 2 paragraphs, or enable a See more / See less functionality to a basic text block.

www.chrispatrickcreative.com/about

Just for educational purposes etc. but there's a good css trick where you can use general sibling selectors with a checkbox and you can get a nice CSS only expansion. Not completely honed this example, but you should see what I'm doing, chuck this into a code block. you could then modify styles and selectors accordingly.

<div class="expandable-wrapper">
<input type="checkbox" checked id="expandchk" />
<label for="expandchk">...</label>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Mollis aliquam ut porttitor leo a diam sollicitudin. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Duis ut diam quam nulla porttitor. Tincidunt ornare massa eget egestas. Vestibulum morbi blandit cursus risus at ultrices mi. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Tortor aliquam nulla facilisi cras fermentum. Tempus urna et pharetra pharetra massa massa. Sagittis purus sit amet volutpat consequat mauris nunc. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Adipiscing elit duis tristique sollicitudin nibh sit amet. Amet justo donec enim diam vulputate ut.
</p>
<p>
Arcu bibendum at varius vel pharetra vel turpis nunc. Duis ut diam quam nulla porttitor massa. Neque gravida in fermentum et sollicitudin ac orci. Diam quam nulla porttitor massa id neque. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Non consectetur a erat nam at. Ligula ullamcorper malesuada proin libero. Vulputate ut pharetra sit amet aliquam id. Volutpat sed cras ornare arcu. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
</p>
</div>

<style>
  div.expandable-wrapper { display:flex; flex-direction:column; }
  div.expandable-wrapper input[type="checkbox"] { display:none; order:999; }
  div.expandable-wrapper label { order:999; width:"100%"; text-align:center; background:#f1f1f1; }
  div.expandable { transition: ease-in-out 0.3s; overflow:hidden; }
  input[type=checkbox]:not(:checked)~label { opacity:0.5; background:white; }
  input[type=checkbox]:checked~label { opacity:1; }
  input[type=checkbox]:not(:checked)~div.expandable { max-height:100vmax; }
  input[type=checkbox]:checked~div.expandable { max-height:4rem;  }
</style>

works like this

• you put your input at the top (because sibling selectors are relative to its location in the DOM model)
• you put your label at the bottom (you could do this in the dom, i've opted to flex the container and order it in css)
• you put your exandable stuff in a container element
• you then use the ~ general sibling selector and :checked pseudo selector which says if the expandable container is after a checked checkbox make it max-height of small, if I'm after an unchecked one make it max height of big...
• I've just chucked some transition in there to make it look nice, but you could do stuff like hide the label once its expanded etc..

if you didn't need a button to toggle the state, then a much simpler version could just use a hover to set the max height.

<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Mollis aliquam ut porttitor leo a diam sollicitudin. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Duis ut diam quam nulla porttitor. Tincidunt ornare massa eget egestas. Vestibulum morbi blandit cursus risus at ultrices mi. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Tortor aliquam nulla facilisi cras fermentum. Tempus urna et pharetra pharetra massa massa. Sagittis purus sit amet volutpat consequat mauris nunc. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Adipiscing elit duis tristique sollicitudin nibh sit amet. Amet justo donec enim diam vulputate ut.
</p>
<p>
Arcu bibendum at varius vel pharetra vel turpis nunc. Duis ut diam quam nulla porttitor massa. Neque gravida in fermentum et sollicitudin ac orci. Diam quam nulla porttitor massa id neque. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Non consectetur a erat nam at. Ligula ullamcorper malesuada proin libero. Vulputate ut pharetra sit amet aliquam id. Volutpat sed cras ornare arcu. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
</p>
</div>

<style>
  div.expandable { 
    transition: ease-in-out 0.3s; 
    overflow:hidden; 
    max-height:8rem;
  }
  div.expandable:hover {
    max-height:100vmax;
  }
</style>