Link Separate CMS Collection Lists

Linking CMS Collection Lists can make for some really unique effects. With just a few lines of Javascript in this lesson, we will learn how to create a hover effect the fills outline text AND changes the associated image that lives in a different collection list (but comes from the same CMS Collection).

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

Inside </body> tag

<script>
// wait for everything to load before running our script.
window.addEventListener("load", init);

function init() {
  // Get references to elements on page we need
  const links = document.querySelectorAll(".heading-link");
  const images = document.querySelectorAll(".image");
  const headingWraps = document.querySelectorAll(".heading-wrap");

  // loop through all the links
  links.forEach(function (link, index) {
    // add a hover event listener for each link
    link.addEventListener("mouseenter", function () {
      // add class '.hide' to every element with class '.heading-wrap'
      headingWraps.forEach((wrap) => {
        wrap.classList.add("hide");
      });

      // remove '.hide' from '.heading-wrap' element associated with this link
      this.querySelector(".heading-wrap").classList.remove("hide");

      // add class '.hide' to all images with class '.image'
      images.forEach((image) => {
        image.classList.add("hide");
      });
      // get the image with same index as this link and remove class '.hide'
      images[index].classList.remove("hide");
    });
  });

  // for initial load, remove '.hide' from first '.image' and first '.heading-wrap'
  images[0].classList.remove("hide");
  headingWraps[0].classList.remove("hide");
}
</script>