Squarespace accordion with images 

Thanks so much for this tute! Very helpful and worked perfectly.

Amazing! Thank you so much for sharing - it works perfectly!

Thank you so much for this! It helped me a lot :)

YOU ARE THE MAN!!! THANK YOU SO MUCH

So helpful. Thank you!

Absolutely ace, cheers man

Hi...just wanted to say thanks....your explanation and step by step instructions along with the (and especially) the code insert were fantastic. Worked first time. Now I just have to find a way to resize the image to fit my format

This is a very helpful and well done tutorial. Thanks! I think that I'm going to try to add a thumbnail image to the contracted accordion block (with preview text), too. The idea: Create a "cleaner" version of a "show more/less" link. Essentially, have a thumbnail preview that switches to a larger alternate image when the item is expanded, then returns when it contracts. Have you attempted this by chance?

Hi, thank you so much! I found a minor problem though, when hitting back on Google Chrome to the page with the accordion images, it would show up as links and not images, do you have a solution for this?

It works a treat, but other links within the accordion have been broken and replaced with a small generic graphic - like a graphic when a url doesnt exist. Any ideas -thanks :) the links that are becoming broken are in bold

Thank you so much! This was very helpful. I am wondering if there is a way to have text aligned to the right side of the image, rather than below? Thank you :)

This is so useful! Thank you. Is there an easy way to resize the photos/reduce size? It seems that if the photos are too large they bleed off the page. I'd like for them to fit exactly within the bounds of the dropdown box.

This is awesome! How do I make the images scale to the width of the screen? I tried the CSS with max-width: 100%; but it is setting the width of the image to about 1/4 screen width.

Anyway to add embed RU-vid videos in the accordion?

Hi mate, thanks for sharing for the step by step instructions. But unfortunately it didn't work in my accordion. You've mention something about Java script. I'm just wondering if the issue I can't see the image is because of this. I can only see the word in bold which has a link that when I hit it it brings the image (as a link) but not part of the accordion section

Ok 1 more question! Is it possible to link these images to an exterior URL? Or add a button underneath?

Hey, great tutorial, very helpful! Do you know if it's possible to arrange the images horizontally instead of vertically? I'm trying to have 4-5 images displayed on the same row next to each other and not have a separate row for each. Thank you!

Him that is great and thank you so much for your help with this - my only issue is that the mobile view doesn't work, as the image is huge, what can I do?

I am adding the code to the CSS panel to resize the images but in mobile view they still bleed off of the page! Any thoughts?

Thank you for this tutorial! I followed it, but it's not working for me. I use SQSP 7.1 and also checked the accordion-selector name. I can't find any differences or mistakes in my code. Is there something I might be missing?

Hi there! I'm getting a "syntax error" for the first line of code. Sorry I'm a novice, any insight into how to correct this error? Thank you!

lets say i wanted to add a soundcloud embeded player in these accordians can i do that?

Hey… thank you so much. It works but how can I change the size of the image. I think my image is to large and it doesn’t change it automatically. May you can help. I don’t have any css skills 🙄

Hi , Thanks for the great tutorial. The link for javascript has broken. Can you help share again? Thanks!!!!

Is it possible to do this with .pdf instead of image?

Thanks! I'm trying to use this as a dropdown link menu. Is there a way to also turn the images into links?

how about image with a link?

Hi - thank you for sharing this. I've used the following code but it breaks links to pdfs in other accordions throughout the site. Any idea what would need to be changed in the code to prevent this? Thank you document.querySelectorAll('.accordion-item__description').forEach((item) => { [...item.querySelectorAll('a')].forEach((link) => { if(link.querySelector('strong')) { const imgSrc = link.href; const img = document.createElement('img'); img.src = imgSrc; img.alt = link.querySelector('strong').innerText; link.replaceWith(img); } }) }); Then added the following code to resize the image #block-d4190c7c4996f151b8c6 .accordion-item__description img { max-width: 100%; }