Jump to content

Expand text to show more text.

Recommended Posts

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

Screenshot 2021-12-05 182543.jpg

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

Edited by Marzon
added comments
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 6 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.