[Share] Click Image - Show List Carousel

Description: Click Image >> Show List Carousel under.

If you can't make it work, you can comment below or message me with site url, I can check easier.

#1. Add an Image and insert the URL:

• #list-carousel

Make sure the option “Open link in New Tab” is disabled

And a List Carousel below

#2. Install Squarespace ID Finder to find the ID of List Carousel (under Image)

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have:

• Image: No need to find ID
• List Carousel: section[data-section-id=”6670e53644d91f34284c07db”]

#3. Use this code to Code Injection > Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){  
  // List Carousel
  $('a[href="#list-carousel"]').click(function(){
    $('section[data-section-id="6670e53644d91f34284c07db"]').addClass("show");
    $('section:not([data-section-id="6670e53644d91f34284c07db"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="6670e53644d91f34284c07db"] {
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>

#4. Explain code a bit