/**********************************
 *  FILTER
 * This script provides an interactive filtering mechanism for a webpage.
 * It toggles the filter's visibility and the button's active state on click.
 **********************************/

// Select all buttons that are used to toggle filters.
let filterButtons = document.querySelectorAll(".click-filter");

let closeButtons = document.querySelectorAll(".close-filter");

// Attach event listeners to each filter button for click events.
filterButtons.forEach((element) => {
  element.addEventListener("click", () => {
    // Toggle the 'active' class on the clicked button to indicate whether the filter is being applied.
    element.classList.toggle("active");

    // Check if the button has become active to determine the next action.
    if (element.classList.contains("active")) {
      // If the button is active, find the filter content and use slideDown animation to reveal it.
      let openFilter = document.querySelector(".open-filter");
      slideDown(openFilter, 250); // Animate the opening of the filter content with a duration of 250ms.
    } else {
      // If the button is not active, find the filter content and use slideUp animation to hide it.
      let contentFilter = document.querySelector(".open-filter");
      slideUp(contentFilter, 250); // Animate the closing of the filter content with a duration of 250ms.
    }
  });
});
closeButtons.forEach((element) => {
    element.addEventListener("click", () => {
         let contentFilter = document.querySelector(".open-filter");
         slideUp(contentFilter, 250); // Animate the opening of the filter content with a duration of 250ms.
    });
});