Jump to content

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

Recommended Posts

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.

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

spacer.png

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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.