-
Posts
15 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Duya
-
-
On 7/26/2021 at 2:38 PM, creedon said:
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
-
On 7/21/2021 at 11:45 AM, creedon said:
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!
-
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.
-
On 4/13/2021 at 2:57 PM, creedon said:
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.
How do I make a collapsible page section?
in Customize with code
Posted · Edited by Duya
This worked perfectly! Thank you so much!