How do I make a collapsible page section?

Site URL: https://www.kvmexhibits.org/close-to-home

Hi,

I've seen a couple different examples of other people trying to achieve this, but I haven't come across a successful code yet. On the URL I provided, I have the beginnings of a workaround for an individual page that will contain a lot of text. In the second section down, I used markdown and a code block to make a some simple expanding headings. However, I would like to do this with an ENTIRE section. Ideally, each section would be a background image, heading, and a plus sign. Super ideally, once expanded, the section would have a minus sign at the top and bottom. I wouldn't just be expanding text however. I wish to expand images, galleries, etc. Is this possible?

4 hours ago, TomTech said:

I wish to expand images, galleries, etc. Is this possible?

Possible I'd say yes.

One way to do it might be to have a page section with the first block a text block with your toggle text or symbol in it.

Then follow with whatever other block you want.

Then your CSS would hide all but the first block of the page section.

Then you would have some code like the following.

<script>

  $( '.page-section:nth-of-type( 1 ) .html-block:first' ).click ( function ( ) {
  
      $( this )
      
        .nextUntil ( '.page-section' )
        
        .slideToggle ( 'slow' );
        
      } );
      
  </script>

This is not a fully fleshed out piece of code. It is just one possible starting point.

If you were going to toggle all page sections then you wouldn't need the nth. If you needed only some then add more. Something like...

const selector = '.page-section:nth-of-type( 1 ) .html-block:first, ' +
  '.page-section:nth-of-type( 3 ) .html-block:first';

$( selector ).click...

I tested this code out here and it seemed to work well.

Let us know how it goes.

7 hours ago, creedon said:

Then your CSS would hide all but the first block of the page section.

Then you would have some code like the following.

Hi thanks for the reply. I'm confused on these directions.

1. What "your CSS" are you referring to? I was unsure, so I might be skipping that part. Instead, I made a new demo page and added 2 sections. In the first section, I added one text block that says "Expand Next". Then I added a second section (just a generic Headline template).

2. Where does your following code code? In 'Page Settings - Advanced'?

Based on what I described above, nothing happens - but I'm sure I have it wrong. Thanks again.

@creedon

It looks amazingly simple solution!! ( the best I have seen so far related to this topic)

Can we get a little more explanation?! 

Thank you in advance!!!

Folks please see the following post for a more formal piece of my code.

@tsl_hscho

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<!--

  begin slide toggle page sections

  SS Version : 7.1
  
  Notes      : the code is comprised of a style and script tag. both are needed
               for the full effect to work
               
               this effect is not active in SS Preview to test it use private
               browsing < https://bit.ly/3f6lhq2 >.
               
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
    
      cursor : pointer;
      
      }
      
    body:not( .sqs-edit-mode ) #footer-sections .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
    
      cursor : unset;
      
      }
      
    /* begin initial hide/show blocks, order is important */
    
      body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > * {
      
        display : none;
        
        }
        
      body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
      
        display : unset;
        
        }
        
    body:not( .sqs-edit-mode ) #footer-sections .page-section .sqs-row > .sqs-col-12 > * {
    
      display : unset;
      
      }
      
      /* end initial hide/show blocks, order is important */
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return;
      
      $( '.page-section' ).find ( '.sqs-block:first' ).click ( function ( ) {
      
        $( this )
        
          .nextUntil ( '.page-section' )
          
          .slideToggle ( 'slow' );
          
        } );
        
      } );
      
    </script>
    
    <!-- end slide toggle page sections -->

This is a more complete example but I wouldn't say it's a solution. I think it might be refined somewhat but it would be useful to see it in an actual use case.

Let us know how it goes.

On 4/13/2021 at 2:57 PM, creedon said:

@tsl_hscho

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<!--

  begin slide toggle page sections

  SS Version : 7.1
  
  Notes      : the code is comprised of a style and script tag. both are needed
               for the full effect to work
               
               this effect is not active in SS Preview to test it use private
               browsing < https://bit.ly/3f6lhq2 >.
               
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
    
      cursor : pointer;
      
      }
      
    body:not( .sqs-edit-mode ) #footer-sections .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
    
      cursor : unset;
      
      }
      
    /* begin initial hide/show blocks, order is important */
    
      body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > * {
      
        display : none;
        
        }
        
      body:not( .sqs-edit-mode ) .page-section .sqs-row > .sqs-col-12 > .sqs-block:first-child {
      
        display : unset;
        
        }
        
    body:not( .sqs-edit-mode ) #footer-sections .page-section .sqs-row > .sqs-col-12 > * {
    
      display : unset;
      
      }
      
      /* end initial hide/show blocks, order is important */
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return;
      
      $( '.page-section' ).find ( '.sqs-block:first' ).click ( function ( ) {
      
        $( this )
        
          .nextUntil ( '.page-section' )
          
          .slideToggle ( 'slow' );
          
        } );
        
      } );
      
    </script>
    
    <!-- end slide toggle page sections -->

This is for v7.1.

This is a more complete example but I wouldn't say it's a solution. I think it might be refined somewhat but it would be useful to see it in an actual use case.

Let us know how it goes.

Hi there,

This worked perfectly and was exactly what I was looking for! Thank you.

One add on I was wondering if you'd be able to help with - would a "Close Section" button placed at the bottom be able to be added? So that at the bottom of each collapsible section, this button placed at the bottom would collapse the section and the page would appear in it's original state.

Thanks in advance.

@Duya

Possible I think. I started to tinker with some code and it seemed to be going well. But I ran into a oddity with jQuery's prevUntil. For the first page section it works a treat and closes up the section. On the second section the first block being used as the toggler is getting hidden. Not good. Essentially the prevUntil is ignoring the selector I'm asking it to ignore and including it for hiding. As far as I can tell the two sections are basically identical in structure. Not sure if there is a bug in my code or in jQuery.

So for now it's a no go until I figure out what is happening.

For those that are into the technical stuff. I've created a minimal test case document that shows the issue.

<!DOCTYPE html>

<html lang="en">

  <head>
  
    <meta charset="utf-8">
    
    <title>
    
      title
      
      </title>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script>
    
      $( ( ) => {
      
        $( '.section' ).find ( '.block:last' ).click ( function ( ) {
        
          $( this )
          
            .css ( 'display', 'none' )
            
            .prevUntil ( '.block:first' )
            
            .slideToggle ( );
            
          } );
          
        } );
        
      </script>
      
    </head>
    
  <body>
  
    <div class="section">
    
      <div class="block">
      
        <p>
        
          Toggle
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          abc
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          def
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          Collapse
          
          </p>
          
        </div>
        
      </div>
      
    <div class="section">
    
      <div class="block">
      
        <p>
        
          Toggle
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          123
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          456
          
          </p>
          
        </div>
        
      <div class="block">
      
        <p>
        
          Collapse
          
          </p>
          
        </div>
        
      </div>
      
    </body>
    
  </html>

Load this up in your browser and click on the second Collapse. All the "blocks" will be hidden. Click on the first Collapse and the first "block" will not be hidden as I would expect.

Here is a more complete version of the original effect bringing together the bits and pieces I mentioned previously plus some more.

Please see Page Sections Slide Toggle.

On 7/13/2021 at 3:26 PM, Duya said:

One add on I was wondering if you'd be able to help with - would a "Close Section" button placed at the bottom be able to be added? So that at the bottom of each collapsible section, this button placed at the bottom would collapse the section and the page would appear in it's original state.

I think I've come up with a work around for the bug I found in jQuery prevUntil.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Install it after the code in the previous post.

old code removed, find newer code later in this thread

The last block of the page section will become the collapse action item.

Let us know how it goes.

15 hours ago, creedon said:

I think I've come up with a work around for the bug I found in jQuery prevUntil.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Install it after the code in the previous post.

<!--

  begin page sections last block slide collapse
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : jQuery
                  
                  page sections slide toggle
  
  Notes         : the code is comprised of a style and script tag. both are
                  needed for the full effect to work
                  
                  this effect should be installed after the page sections slide
                  toggle code. order is important
                  
                  this effect is not active in SS Preview. to test it use
                  private browsing < https://bit.ly/3f6lhq2 >.
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  no user serviceable parts below
  
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) .twc-psst .sqs-row > .sqs-col-12 > .sqs-block:last-child .sqs-block-content {
    
      cursor : pointer;
      display : inline-block;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      $( '.twc-psst' ).find ( '.sqs-block:last' )
      
        .click ( function ( ) {
      
          const $this = $( this );
          
          const selector = '#' +
          
            $this
            
              .parent ( )
              
              .find ( '.sqs-block:eq( 1 )' )
              
              .attr ( 'id' );
              
            $this
            
              .css ( 'display', 'none' )
              
              .prevUntil ( selector )
              
              .slideToggle ( 'slow' )
              
              .parents ( '.page-section' )
              
                .toggleClass ( 'twc-psst--open' );
                
          } );
          
      } );
      
    </script>
    
  <!-- end page sections last block slide collapse -->

The last block of the page section will become the collapse action item.

Let us know how it goes.

Hi,

Thank you for this, but unfortunately it doesn't seem to work. I added it right below the initial code in the page's header code injection that creates the collapsible section in the first place. 

Added this new code but it doesn't seem to do anything as the last block in each page's section just appears normal and does not have any functionality.

@Duya

Please post the URL for the page sections slide toggle your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 7/21/2021 at 11:45 AM, creedon said:

@Duya

Please post the URL for the page sections slide toggle your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

https://melaniekatzman.squarespace.com/services

Password: melanie

Thank you!

@Duya

Please update the code on your site to use my code from my July 19th post. The post that starts with the following.

Quote

Here is a more complete version of the original effect bringing together the bits and pieces I mentioned previously plus some more.

Be sure to follow all the instructions in that post.

Let us know how it goes.

On 7/26/2021 at 2:38 PM, creedon said:

@Duya

Please update the code on your site to use my code from my July 19th post. The post that starts with the following.

Be sure to follow all the instructions in that post.

Let us know how it goes.

Sorry, I had done so but reverted back to the first code you sent as the updated one made the first text block of the section that triggers the dropdown look wonky (see screenshot) and the button at the bottom was not functioning correctly. It would close the section, but the 2nd last block would still be showing after collapsing using the bottom button.

I had to revert back so that the site looked right for the client. I've gone and duplicated everything on a test site:

https://yellow-giraffe-grl3.squarespace.com/what-we-do

Password: duya

Thank you

1 hour ago, Duya said:

I had to revert back so that the site looked right for the client.

Totally understandable.

Quote

I've gone and duplicated everything on a test site:

Excellent! I'm in!

@Duya

Please see my first July 19th post for link to updated code. Give the code a go on your duplicate site and let us know how it goes.

2 hours ago, creedon said:

@Duya

Please see my first July 19th post for link to updated code. Give the code a go on your duplicate site and let us know how it goes.

This worked perfectly! Thank you so much!

4 hours ago, Duya said:

is there any way to make it so the code avoids the page's first section?

I've have updated my code. It should now avoid all page sections that don't have the code block set with <div class="twc-psst"></div>.

Thank you by the way for reporting issues! I do test my code but there is nothing like real world use to shake out the bugs.

Let us know how it goes.

Hi @creedon I am also trying to make sections collapse and expand, but am having trouble getting the code to work. I think I may be injecting the code incorrectly. 

I have a parallax scrolling brine template with big section banners. I want to have a button in each section to show/collapse the section below it. Similar to the site below: 

https://www.liorraz.co.il/

Could you help with this? I have a duplicate of my site set up and have been testing out different codes I have been finding and i've been unsuccessful. Lots of tutorials for FAQ question expanding, but that's not what I want. 

@Austyn

The code in this thread is for a v7.1 site. It won't work for a v7.0 site.

Hey all,

I see that @creedon was able to help you all out with some of their custom code for accordions or collapsible page sections. Just for future reference, it is now possible to add an accordion menu to your site without custom code using the accordion block! We have some information about the possibilities of the accordion block in our guide "Accordion blocks."

The accordion block is a fantastic and welcome addition.

Let me clarify that my code and the accordion block are not equivalent. My code manipulates page sections and SS's code is at the block level.

Hi @creedon, firstly thanks so much for providing this solution, it's been insanely helpful.

I was wondering if the code is meant to work for multiple sections on one page? If you add the code block at the top of each section that is. 

I can't see to get it to work on more than the first section. 

Thank you!

58 minutes ago, SaniceMarlow said:

I was wondering if the code is meant to work for multiple sections on one page? If you add the code block at the top of each section that is. 

Yes you need to add the <div class="twc-psst"></div> to each section you want to collapse.