Jump to content

Customise Accordion Blocks

Recommended Posts

Does anyone know if there is any code that will allow me to customise my Accordion blocks so when you click on a title to expand the image changes to another image rather than the current image getting bigger for each expand point?

Link to website the accordion block is on the front page:
https://www.cuppastudio.co.nz/

There is also a screen recording attached to explain what I mean 🙂

 

Edited by emmawatt
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

18 hours ago, emmawatt said:

Does anyone know if there is any code that will allow me to customise my Accordion blocks so when you click on a title to expand the image changes to another image rather than the current image getting bigger for each expand point?

Link to website the accordion block is on the front page:
https://www.cuppastudio.co.nz/

There is also a screen recording attached to explain what I mean 🙂

 

1604362424_ScreenRecording2022-11-09at8_01_45AM.mov

You can try using the accordion block next to the image block. When you expanse the accordion, it will make the image bigger (the standard behavior)

If you need to change the picture in another place, we need some javascript code to work around with it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
On 11/10/2022 at 7:34 AM, emmawatt said:

Hi There, Yeah I am wanting to change the picture that is next to it not make it bigger like it is at the moment do you have the code that could work?

Image is bigger when clicking accordion, is a bug. You can report it to SS Customer Care.

I see this problem on some sites.

The temporarily fix is setting fixed height for image, for example with Design Services image, add this to Design > Custom CSS. You can change 500 to another number

@media screen and (min-width:768px) {
.fe-6359ef2edc63975345b8021b .design-layout-fluid img {
    height: 500px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.