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
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.
A much simpler version of the above is now delivering consistent results for me. Maybe it will work for others?
1) Add new Blank Section between Header and Image Section.
2) Set this new Section's Height to its lowest value: 10.
3) Capture Section ID.
4) Insert the code below with the Section ID into the page's Advanced Code Injection.
[data-section-id="Your Section ID"]>.content-wrapper {
height: 0 !important;
padding: 0 !important;
}
Duya reacted to creedon in How do I make a collapsible page section?
Duya got a reaction from creedon in How do I make a collapsible page section?
