/**
add this css on the page or website to hide this div by default

 #halfdetailssection {
  display: none;
}
**/


const toggleButton = document.getElementById("fulltoggleButton");
const myDiv = document.getElementById("fulldetailssection");
const halfdetailssection = document.getElementById("halfdetailssection");

// Set initial state (visible)
myDiv.style.display = "block";
halfdetailssection.style.display = "none";

if (toggleButton) {
  toggleButton.addEventListener("click", function () {
    if (myDiv.style.display === "none") {
      myDiv.style.display = "block";
      halfdetailssection.style.display = "none";
    } else {
      myDiv.style.display = "none";
      halfdetailssection.style.display = "block";
    }
  });
}

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

if (halftoggleButton) {
  halftoggleButton.addEventListener("click", function () {
    if (halfdetailssection.style.display === "none") {
      halfdetailssection.style.display = "block";
      myDiv.style.display = "none";
    } else {
      halfdetailssection.style.display = "none";
      myDiv.style.display = "block";
    }
  });
}