How do I make a collapsible page section?

Hi Everyone, I would love to use this in my website which is a Brine 7.0 template, is there a way to modify this to suit 7.0 so it works on there?

22 hours ago, creedon said:

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

Thanks @creedon, I had done that, but I've just realised what the problem was.

I had a spacer block adjacent to the code block which stopped it from working – removing the spacer block fixes the issue. 

Thank you again!

Hello, @creedon this code is amazing. I have inputted it into my site and it works great. However, for some reason, the toggle arrows are not showing up when viewing it. Is there any advice for that?

1 hour ago, jcupian said:

However, for some reason, the toggle arrows are not showing up when viewing it. Is there any advice for that?

Please post the URL for a page on your site where we can see your issue.

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 does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

28 minutes ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

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 does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

https://pumpkin-pentagon-fmgr.squarespace.com/nova-scotia

Password: 7412

Please let me know the issue! It is for the section page "Contributors" that I am having trouble with the appearance of the toggle.

1 hour ago, jcupian said:

Please let me know the issue!

I found two issues. First my code doesn't account for arrow colors other than black. Second the following instruction doesn't mention changing from Paragraph 2, the default, to any other.

Quote

After the code block add a text block with the label text for the page section.
From there you can add whatever blocks you want to the section.

The toggle arrow breaks if the text is not Paragraph 2. I should have been more specific about not changing from Paragraph 2.

It appears there is some room for improvement in my code. I'll see what I can do to make it better. In the meantime as a workaround add the following after my code.

<style>

  html:not( .squarespace-damask ) .twc-psst .sqs-row > .sqs-col-12 > .sqs-block:nth-child( 2 ) p {
  
    font-family : acumin-pro;
    font-size : calc( ( 2.8 - 1 ) * 1.2vw + 1rem );
    
    }
    
  html:not( .squarespace-damask ) .twc-psst .sqs-row > .sqs-col-12 > .sqs-block:nth-child( 2 ) p::after {
  
    border-color : white;
    vertical-align : middle;
    
    }
    
  </style>

You might want to follow this thread for any updates I might post.

Let us know how it goes.

1 hour ago, creedon said:

I found two issues. First my code doesn't account for arrow colors other than black. Second the following instruction doesn't mention changing from Paragraph 2, the default, to any other.

The toggle arrow breaks if the text is not Paragraph 2. I should have been more specific about not changing from Paragraph 2.

It appears there is some room for improvement in my code. I'll see what I can do to make it better. In the meantime as a workaround add the following after my code.

<style>

  html:not( .squarespace-damask ) .twc-psst .sqs-row > .sqs-col-12 > .sqs-block:nth-child( 2 ) p {
  
    font-family : acumin-pro;
    font-size : calc( ( 2.8 - 1 ) * 1.2vw + 1rem );
    
    }
    
  html:not( .squarespace-damask ) .twc-psst .sqs-row > .sqs-col-12 > .sqs-block:nth-child( 2 ) p::after {
  
    border-color : white;
    vertical-align : middle;
    
    }
    
  </style>

You might want to follow this thread for any updates I might post.

Let us know how it goes.

Thank you so much for clarifying about paragraph2! I've added your new code and it works perfectly now. Will keep an eye to this thread for future updates.

2 hours ago, jcupian said:

Will keep an eye to this thread for future updates.

Incoming! 

Folks I have updated my cited code in my July 19, 2021 post.

Highlights from the change notes.

• user can override default toggle arrow color
• code picks up a default color for toggle arrow from parent element
• user can now use a text block with any Header or Paragraph style. previously the code only worked with Paragraph 2

Please read the install instructions carefully as the steps have changed a bit. The overall idea is the same. Just some syntax changes. Also, if the version you have now is working for you, no need to change your code unless you want to use some of the new features.

Hey @creedon,

I created a new trial site to test this code out (as I realized the site I was working on previously was 7.0). The code doesn't seem to work for me, but I'm not sure what I'm doing wrong as I've gone through the process to install the code a couple times... testing it, erasing all code and reinstalling... Would love if you could point me in the right direction here. 

The last text in the yellow section "test test" disappears when clicked on. Not sure why that happens - was thinking maybe that was the "close" function? 

https://tan-pumpkin-tmht.squarespace.com

PW: homegrown22

2 hours ago, 222dru said:

The code doesn't seem to work for me

My code was written before Fluid Engine was released and is not FE compatible.

Hello! This is the exact code I need for my website thank you so much for creating it @creedon. I, however, am having the hardest time getting it to work. Would love any advice that you might have. 

Page: https://fennel-cod-a7zw.squarespace.com/masscreative

Password: Dev#2023!

52 minutes ago, jasminetud said:

I, however, am having the hardest time getting it to work. Would love any advice that you might have. 

Please see my previous post.

I have updated my cited code in my July 19, 2021 post.

I made the following changes.

  * add plus toggle icon option
  * add fluid engine compatibility

Actually, creating a collapsible section is (or can be) MUCH simpler. Only 4 lines of code. If you put the parenthesis into separate lines, then it's six lines of code 🙂

The important part is to set the section's (that you want to collapse) "Fill Screen" option to OFF in the "Edit Section" dialog.

The rest is easy.

Working demo site (you have 14 days starting from March 14, 2023):
https://elephant-apricot-d89n.squarespace.com

Password: Accordion

// If you use a button that you will click on, make sure its URL is set to # (pound sign).
// Use jQuery to locate to object you want to click on. Eg, if your first section has a
// single button, then:
// "section:first .button-block:first"
//
// Similarly, use jQuery to locate the section you want to toggle. Eg, if you want to
// collapse the 2nd section, then:
// "section:nth-of-type(2)"
//
// Yup. That's it. 4 lines. I told you :-)

<script>
$(function() {
    $("section:first .button-block:first").click(function(e) {
        e.preventDefault();
        $("section:nth-of-type(2)").slideToggle(1000);
    });
});
</script>

I see this question comes up a lot. After you link jQuery into your page's header, add 4 lines of scripts as well. Demo site available for 14 days starting form March 14, 2023 (password: Accordion). See my post here for explanation and code (which you can also see on the site):

On 2/8/2023 at 3:59 PM, creedon said:

I have updated my cited code in my July 19, 2021 post.

I made the following changes.

  * add plus toggle icon option
  * add fluid engine compatibility

@creedon thank you for continuing to update this code! I’m trying to create collapsible sections for a client site, but am not finding the most up to date, fluid engine-compatible version. It looks like it was removed from the 2021 post you linked and the older versions in this thread don’t seem to work on my site. Would you mind sharing again? 

5 hours ago, maxalagh said:

It looks like it was removed from the 2021 post you linked

The code is linked to in that post. Click the link.

@creedon Ah, my bad! Thank you, this worked perfectly and achieved the exact effect I was looking for! Really appreciate it. 🙂

@creedon follow up question: is there a way to make the expanded section close without scrolling back up to the previous section/code block? For example, adding a “collapse” link at the bottom of the expanded block (example attached), or having sections close automatically once another section has been expanded?

5 hours ago, maxalagh said:

is there a way to make the expanded section close without scrolling back up to the previous section/code block? For example, adding a “collapse” link at the bottom of the expanded block (example attached)

You could try something like the following in a code block.

<a onclick="$( this ).parents ( '.page-section' ).prev ( ).click ( );">

  collapse
  
  </a>

Let us know how it goes.

@creedon amazing, works perfectly!! Thanks so much. 🙏🏼

Hi @creedon

Trying to make this work on my website. Although the arrow is showing when including the code

<x-twc-psst />

, the subsequent section is not shown when clicking on the arrow.

I have used the code you provide here:

https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Page Sections Slide Toggle

Here's an example page

https://www.jazzhane.com/section-toggle

Do you think you can help?

2 hours ago, aniloez said:

the arrow is showing when including the code, the subsequent section is not shown when clicking on the arrow.

It appears the jQuery you have installed is a customized version, not the full version. Please follow my jQuery install instructions replacing your jQuery install.

@creedon - thanks so much for this great code! Question: is there anyway to allow for this to expand a gallery section in addition to a section with text? 

I see it is able to hide the gallery section but not expand it. Thank you!

Site URL: https://pigeon-carrot-2w95.squarespace.com/services-1
PW: hello

3 hours ago, estormstudio said:

is there anyway to allow for this to expand a gallery section in addition to a section with text? 

I see it is able to hide the gallery section but not expand it.

There is now!

I have updated my cited code in my July 19, 2021 post.

From the changes.

• fix for Gallery section elements not showing images

Let us know how it goes.