So basically I have made a Carousel using Flickity and within each slide, there is an Image and a button that when clicked - reveals text.

What i'm trying to achieve is when the user clicks to go to the next item in the Carousel, the text then goes back to display none until the button is click again.

My toggle button -

function toggleText(){
  var elms = document.getElementsByClassName("figure-caption-test");
  var select = document.getElementsByClassName(".carousel-cell-test.is-selected");

  Array.from(elms).forEach((x) => {
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  })
}

My Carousel -

jQuery(function ($) {
    var parent = $(".carousel-test");
    var divs = $(".carousel-cell-test").not(".carousel-cell-test.is-selected");
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

My HTML -

 <div class="carousel-test" data-flickity>
      {% for image in images %}
      <div class="carousel-cell-test">
      {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #}
                <figure class="figure">
                  {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #}
                  <img class="figure-image lazyload"
                    data-flickity-lazyload="{{ image.src|resizeDynamic(0, 540) }}"
                    srcset="{{ placeholderImage(image.aspect * 540, 540) }}"
                    data-srcset=">
                  {% if image.caption %}
                  <button class="figure-button" id="figure-button" onclick="toggleText()">
        REVEAL ANSWER
    </button>
    
                    <figcaption class="figure-caption-test" id="reveal-text" style="display: none;">{{ image.caption|e }}</figcaption>
                  {% endif %}
                </figure>
                  </div>
            {% endfor %}
    
    </div>

Because the slider is made using Flickity, a lot of the code is in the Console. This is what i'm trying to achieve, but it wont work when I try and implement it. But I thought adding something like this to my "toggleText" would fix this issue.

var button = document.getElementsByClassName("flickity-prev-next-button").onclick = function(){
      document.getElementsByClassName("figure-caption-test").style.display = "none";
    }

Also i'm making this is twig. Any help is greatly appreciated.