document.addEventListener("DOMContentLoaded", function () {
  const toggleButton = document.getElementById("fulltoggleButton");
  const myDiv = document.getElementById("fulldetailssection");
  const halfdetailssection = document.getElementById("halfdetailssection");

  if (toggleButton) {
    toggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  const halftoggleButton = document.getElementById("halftoggleButton");

  if (halftoggleButton) {
    halftoggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  // Attach click event to the document body for specific slick buttons
  document.body.addEventListener("click", function (event) {
    const target = event.target;
    const isSlickButton = target.matches(".wpl-el-property-slider-section .slick-next, .wpl-el-property-slider-section .slick-prev, .wpl-el-testimonial-section .slick-next, .wpl-el-testimonial-section .slick-prev");

    if (isSlickButton) {
      if (myDiv.style.display !== "none") {
        myDiv.style.display = "none";
        halfdetailssection.style.display = "block";
      }
    }
  });

  function toggleSections() {
    if (myDiv.style.display === "none") {
      myDiv.style.display = "block";
      halfdetailssection.style.display = "none";
    } else {
      myDiv.style.display = "none";
      halfdetailssection.style.display = "block";
    }
  }
});