Click Image Show List Carousel

Demo: https://tuanphan-demo01.squarespace.com/click-image-show-list-carousel?noredirect

Password: abc

Description: Click Image >> Show List Carousel

#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)

In my example, we will have:

• Image Block: 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