"Read More" Text Accordion in Brine Index with Photo Banners

Site URL: https://4clab.org/#about-4cl

Hi @tuanphan, I've used your "Read More" html/css code found here to create a pair of text accordions on an "About" page in a Brine index comprised of alternating pages of text and full-height photo banners.  It works perfectly on the page itself, however the photo banners in the index are not adapting when the accordions are open, creating a reduction in their height equal to the space taken up by the expanded text.  Is there any way to remedy this?  Thanks.

FYI The problem seems to resolve when I disable Parallax Scrolling - I'd prefer to keep Parallax if possible, if there's a viable solution.

6 hours ago, joshuakilcoyne said:

FYI The problem seems to resolve when I disable Parallax Scrolling - I'd prefer to keep Parallax if possible, if there's a viable solution.

if you follow the exact solution on codepen it is pure css solution so ajax won't be affect

Thanks for your response @bangank36 -  can you explain any further?  If I only use the CSS code how will it know which text to target?  Right now I have the HTML in code blocks with the expanding text inserted as it is on the codepen page.

5 hours ago, joshuakilcoyne said:

Thanks for your response @bangank36 -  can you explain any further?  If I only use the CSS code how will it know which text to target?  Right now I have the HTML in code blocks with the expanding text inserted as it is on the codepen page.

Can you enable ajax again so we can re-produce the issue?

Sure thing - just enabled ajax. Thanks for following up.

Squarespace launched a new Accordion Block yesterday. This new native block doesn't require custom code and is therefore safer and easier to install.

It is ideal for FAQs and product specifications. You can choose and style the icon, add dividers and change row padding. For more information see Accordion blocks.