5
(4)
Accordion item with multiple images

Squarespace does not offer an accordion with the option to upload images. Probably feature versions will have that but for now we need a workaround.

Since I am passionate UI guy, who really likes to be creative in finding solutions and workarounds when the feature is not present, I want to propose to you my solution for the accordion.

The steps are the following:

  • You add a simple text in the carousel item editor and you add a bold styling on it
Addig a text in Squarespace accordion with bold
  • In the second step you add a simple link, but the link(url) will point towards an image not an html or php. For now there is no option to add an image, well maybe Chuck Norris could do it though
Adding a link on a text in squarespace
  • The third step is to add your image from the file menu(supposing that you already uploaded it):
  • The fourth and final step involves some coding(javascript). In the code injections menu on top (if you have a pro subscription – Update: Pro means business plan or above) you can add a script tag in the footer panel with the following script:

Now that you know the steps, I will also insert here the full code for you to copy-paste it and provide you some explanations.

 <script>
  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);
             }	
         })	
     });
 </script>

Update: You don’t need the […item.querySelectorAll(‘a’)] you could just use item.querySelectorAll(‘a’) because Nodelist now supports forEach method in a lot’s of browsers.

If(link.querySelector(‘strong’))

Here we check if there is a strong tag inside the link, to differentiate from normal links. Since links in Squarespace accordion or bolded anyway, puttin an extra strong on the text will serve only as a marker/flag that tells the script that a link with a strong tag inside means that it needs to be converted into an image.

After this we create the link with createElement(‘img’), we add the alt attribute with the text that we added in the strong tag link.querySelector(‘strong’).innerText.  

Link.replaceWith(img);

Finally we just replace the original link with the created <img alt=”…” /> tag.

For further explanations watch the video below:

I hope this article helped you in any way and please subscribe if you don’t want to miss new ui workarounds.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

Categorized in:

javascriptSquarespace

Tagged in:

, , , , ,