title: Dynamic Image Modal with active state
body: <p>I have image folders that expand when clicked on to view the whole album. I've been able to make the first album work, but I cant seem to get the active state to carry over to the other albums.</p>
  <p>My JavaScript knowledge is quite limited so I'm unsure where I'm going wrong with this, but the goal here is to have a grid showcasing thumbnails for different image collections and when a collection is clicked on, the modal will popup and dynamically display the collection of images that was clicked on.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const modal = document.querySelector(".modal");
  const buttons = document.querySelectorAll("[data-carousel-button]");
  const carousel = document.querySelector(".carousel");
  const closeButton = document.querySelector(".close");
  
  const gridImages = document.querySelectorAll(".grid-img img");
  const slide = document.querySelector(".slide");
  
  const blueLotusFineArt = document.querySelector(".one");
  const blueLotusModal = document.querySelector(".blue-lotus");
  
  const greenWomenFineArt = document.querySelector(".two");
  const greenWomenModal = document.querySelector(".green-women");
  
  buttons.forEach((button) =&gt; {
    button.addEventListener("click", () =&gt; {
      const offset = button.dataset.carouselButton === "next" ? 1 : -1;
      const slides = button
        .closest("[data-carousel]")
        .querySelector("[data-slides]");
  
      const activeSlide = slides.querySelector("[data-active]");
      let newIndex = [...slides.children].indexOf(activeSlide) + offset;
      if (newIndex &lt; 0) newIndex = slides.children.length - 1;
      if (newIndex &gt;= slides.children.length) newIndex = 0;
  
      slides.children[newIndex].dataset.active = true;
      delete activeSlide.dataset.active;
    });
  });
  
  // select image from grid
  // only display selected gallery
  
  gridImages.forEach((gridImage) =&gt; {
    gridImage.addEventListener("click", () =&gt; {
      modal.classList.add("open");
      closeButton.classList.add("open");
      carousel.style.display = "block";
    });
  });
  
  blueLotusFineArt.addEventListener("click", () =&gt; {
    blueLotusModal.style.display = "block";
  });
  
  greenWomenFineArt.addEventListener("click", () =&gt; {
    greenWomenModal.style.display = "block";
    slide.style.opacity = "1";
  });
  
  closeButton.addEventListener("click", () =&gt; {
    carousel.style.display = "none";
    closeButton.classList.remove("open");
    modal.classList.remove("open");
    blueLotusModal.style.display = "none";
    greenWomenModal.style.display = "none";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    min-height: 100vh;
  }
  
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  .flex {
    display: flex;
    gap: 4rem;
  }
  
  #fine-art {
    position: relative;
    z-index: 2;
    background-color: var(--clr-primary);
    min-height: auto;
  }
  
  .container {
    padding-inline: 4em;
    margin-inline: auto;
    max-width: 120rem;
  }
  
  .wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 2rem;
    padding: 4rem 0;
  }
  
  .grid {
    display: grid;
    gap: var(--gap, 1rem);
  }
  
  .modal {
    opacity: 0;
    position: fixed; 
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(43, 43, 43, 0.5);
    transition: all 300ms ease-in-out;
    pointer-events: none;
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
  }
  
  .modal.open {
    opacity: 1;
    pointer-events: all;
  }
  
  .close {
    position: fixed;
    right: 32px;
    top: 50px;
    width: 50px;
    height: 32px;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    transition: all 300ms ease-in-out;
    cursor: pointer;
  }
  
  .close.open {
    opacity: 1;
    pointer-events: all;
  }
  
  .close:before,
  .close:after {
    position: absolute;
    left: 15px;
    content: " ";
    height: 50px;
    width: 5px;
    background-color: var(--clr-primary);
  }
  
  .close:before {
    transform: rotate(45deg);
  }
  
  .close:after {
    transform: rotate(-45deg);
  }
  
  .blue-lotus,
  .green-women {
    display: none;
    pointer-events: none;
  }
  
  .carousel {
    width: 100vw;
    height: 80vh;
    position: absolute;
    z-index: 10;
    display: none;
  }
  
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
  }
  
  .slide &gt; img {
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
  }
  
  .slide[data-active] {
    opacity: 1;
    transition-delay: 0ms;
  }
  
  .carousel-button {
    position: absolute;
    background: none;
    border: none;
    font-size: 4rem;
    top: 50%;
    z-index: 11;
    transform: translateY(-50%);
    color: rgba(241, 242, 245, 0.5);
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0 0.5rem;
    background-color: rgba(43, 43, 43, 0.1);
  }
  
  .carousel-button:hover,
  .carousel-button:focus {
    color: rgba(241, 242, 245, 1);
    background-color: rgba(43, 43, 43, 0.2);
  }
  
  .carousel-button.prev {
    left: 1rem;
  }
  
  .carousel-button.next {
    right: 1rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="fine-art"&gt;
        &lt;div class="container fine-art"&gt;
          &lt;div class="wrapper grid"&gt;
            &lt;div class="grid-img one"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Blue Lotus&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img two"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Green Women&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img three"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Studio&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img four"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Starlet&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img five"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Portraits&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img six"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Chameleon&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img seven"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;De Kelders&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img eight"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Elementals&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid-img nine"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Fine Art"
                width="450"
                height="600"
                decoding="async"
                loading="lazy"
              /&gt;
              &lt;p&gt;Mosaic&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  &lt;a class="close"&gt;&lt;/a&gt;
      &lt;div class="modal"&gt;
        &lt;div class="carousel" data-carousel&gt;
          &lt;button class="carousel-button next" data-carousel-button="next"&gt;
            &amp;#8680;
          &lt;/button&gt;
          &lt;button class="carousel-button prev" data-carousel-button="prev"&gt;
            &amp;#8678;
          &lt;/button&gt;
          &lt;ul class="blue-lotus" data-slides&gt;
            &lt;li class="slide" data-active&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 1"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 2"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 3"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 4"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 5"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Blue Lotus 6"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="green-women" data-slides&gt;
            &lt;li class="slide" data-active&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Green Women 1"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Green Women 2"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
            &lt;li class="slide"&gt;
              &lt;img
                src="https://source.unsplash.com/random"
                alt="Green Women 3"
                width="2100"
                height="1400"
                decoding="async"
                loading="lazy"
              /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>